react.js 多个组件集成示例

2022-02-22 17:07:54

这个看得有点懵，

可能要结合其它实例看。

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>

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'));

码农公寓

相关文章