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