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。