React this.props.children

五、this.props.children

this.props 對(duì)象的屬性與組件的屬性一一對(duì)應(yīng)，但是有一個(gè)例外，就是 this.props.children 屬性。它表示組件的所有子節(jié)點(diǎn)（查看 demo05）。

var NotesList = React.createClass({
  render: function() {
    return (
      <ol>
      {
        this.props.children.map(function (child) {
          return <li>{child}</li>
        })
      }
      </ol>
    );
  }
});

React.render(
  <NotesList>
    <span>hello</span>
    <span>world</span>
  </NotesList>,
  document.body
);

上面代碼的 NoteList 組件有兩個(gè) span 子節(jié)點(diǎn)，它們都可以通過(guò) this.props.children 讀取，運(yùn)行結(jié)果如下。