首页 > 代码库 > react.js 多个组件集成示例
react.js 多个组件集成示例
这个看得有点懵，
可能要结合其它实例看。
html
<!DOCTYPE html><html><head> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <script src="http://cdn.bootcss.com/react/0.14.8/react-with-addons.js"></script> <script src="http://cdn.bootcss.com/react/0.14.8/react-dom.min.js"></script> <meta charset="utf-8"><title>React JS Example</title></head><body> React.js Example<br/><div id="container"></div></body></html>
js
var data = http://www.mamicode.com/[{"when": "2 minutes ago", "who": "Jill Dupre", "description": "Created new account" }, { "when": "1 hour ago", "who": "Lose White", "description": "Added fist chapter"}];var headings = [‘When‘, ‘Who‘, ‘Description‘];var Heading = React.createClass({ render: function() { return <th>{this.props.heading}</th>; }});var Headings = React.createClass({ render: function() { var headings = this.props.headings.map(function(name) { return <Heading heading = {name}/>; }); return <thead><tr>{headings}</tr></thead>; }});var Row = React.createClass({ render: function() { return <tr> <td>{this.props.changeSet.when}</td> <td>{this.props.changeSet.who}</td> <td>{this.props.changeSet.description}</td> </tr>; }});var Rows = React.createClass({ render: function() { var rows = this.props.changeSets.map(function(changeSet) { return(<Row changeSet = {changeSet}/>); }); return <tbody>{rows}</tbody>; }});var App = React.createClass({ render: function() { return <table className = ‘table‘> <Headings headings = {this.props.headings} /> <Rows changeSets = {this.props.changeSets} /> </table>; }});ReactDOM.render(<App headings = {headings} changeSets = {data} />, document.getElementById(‘container‘));
react.js 多个组件集成示例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。