React 学习二 组件
React的一个最大的特点就是组件化的开发模式。今天就来试一下:
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="../src/react-0.14.3/build/react.js"></script>
<script src="../src/react-0.14.3/build/react-dom.js"></script>
<script src="../src/react-0.14.3/build/browser.min.js"></script>
</head>
<body>
<div id='header'>
</div>
<hr style="clear:both" />
<div id="body">
<div> Hi this is test page</div>
</div>
<hr />
<div id="footer"></div>
<script type="text/babel">
var JMFooter = React.createClass({
render: function() {
return (
<div className="footer">
<a href="/AboutUS.aspx">关于博客园</a>
<a href="/ContactUs.aspx">联系我们</a>
©2004-2015<a href="http://www.cnblogs.com/">博客园</a>
保留所有权利
<a href="http://www.miitbeian.gov.cn" target="_blank">沪ICP备09004260号</a>
</div>
);
}
});
var JMHeader = React.createClass({
render: function(){
return <div><div style={{color:'red'}}><h1 >Jimson Blog</h1></div><h3>今天是{this.props.date} </h3></div>;
}
})
ReactDOM.render(
<JMHeader date={(new Date).toDateString()} style={"float:left"}/>,
document.getElementById('header')
);
ReactDOM.render(
<JMFooter />,
document.getElementById('footer')
);
</script>
</body>
</html>
View Code
创建两个组件Header,和Footer。 常见的网站头部和底部(这里直接复制了博客园的地步) 看效果:
有几个问题JSX语法的问题:
1. 添加css 类,<div class="footer"> 是没有效果的,也不会渲染熟悉,正确的是 <div className="footer">
2. 添加style,<div style="color:red">是直接报错的,这里JSX语法不支持这样的,正确的写法是 <div style={{color:'red'}}>
3. 创建组件:React.createClass的render方法只能返回一个封装的节点,多个节点就会报错。如:return<h1></h1><h2></h2> 报错,return <div><h1></h1><h2></h2></div> 是成功的。
4. jsx不会写,没关系,用 jsx compiler 直接把html翻译过来。
以上是 React 学习二 组件 的全部内容, 来源链接: utcz.com/z/383897.html