React中的this.props.children

React this.props.children

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

var  NotesList = React.createClass({
    render(){
        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
)

上面代碼的NotesList組件有兩個span子節點，他們都可以通過this.props.children讀取。

這里需要注意，this.props.children的值有三種可能：如果當前組件沒有子節點，它就是undefined;如果有一個子節點，數據類型是Object;如果有多個子節點，數據類型就是array。所以，處理this.props.children的時候要小心。

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