我正在关注30 days of react pdf for day 4,我似乎无法让 css 呈现。我可以得到文本和图像来显示。我试图基本上复制 helloworld 概念,但我现在把所有东西都放在一个 html 中。我也尝试了 github 的 day 4 示例,index.html 也不呈现任何内容。因此,如果有人知道原因,请帮助我。提前感谢。
<!DOCTYPE html>
<html lang="en">
<head>
<meta cht="utf-8">
<link href="https://gist.githubusercontent.com/auser/2bc34b9abf07f34f602dccd6ca855df1/raw/070d6cd5b4d4ec1a3e6892d43e877039a91a9108/timeline.css" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<title>Time Line App</title>
<!-- Script tags including React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class App extends React.Component { render() { return (
<div className="notificationsFrame">
<div className="panel">
<Header />
<Content />
</div>
</div>
) } } class Header extends React.Component { render() { return (
<div className="header">
<div className="fa fa-more"></div>
<span className="title">Timeline</span>
<input type="text" className="searchInput" placeholder="Search ..." />
<div className="fa fa-search searchIcon"></div>
</div>
) } } class Content extends React.Component { render() { return (
<div className="content">
<div className="line"></div>
{/* Timeline item */}
<div className="item">
<div className="avatar">
<img alt='Doug' src="http://www.croop.cl/UI/twitter/images/doug.jpg" /> Doug
</div>
<span className="time">
An hour ago
</span>
<p>Ate lunch</p>
<div className="commentCount">
2
</div>
</div>
{/* ... */}
</div>
) } } var mount = document.querySelector('#app'); ReactDOM.render(
<App />, mount);
</script>
</body>
</html>
问题解决了。所以只需要将class = "demo"
添加到div id = "app"></div>
。
所以它应该是这样的:<div id="app" class="demo"></div>
。另外我不得不在本地下载 css。还没有从 css 中给出的链接得到它的工作。与 pdf 图像有一些微小的 css 差异。
本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处
评论列表(25条)