这个看得有点懵，
可能要结合其它实例看。
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 = [{ "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'));
