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>
创建两个组件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翻译过来。
MSN: 20045912@163.com