React中的this.props.children

1、this.props對象的屬性與組件的屬性是一一對應的，但是有一個例外就是this.props.children屬性，它表示組件的所有子節點：

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

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

2、上面代碼的 NoteList 組件有兩個 span 子節點，它們都可以通過 this.props.children 讀取，運行結果如下：

3、需要注意的是， this.props.children 的值有三種可能：如果當前組件沒有子節點，它就是 undefined;如果有一個子節點，數據類型是 object ；如果有多個子節點，數據類型就是 array 。

4、React 提供一個工具方法 React.Children 來處理 this.props.children 。我們可以用 React.Children.map 來遍歷子節點，而不用擔心 this.props.children 的數據類型是 undefined 還是 object。