React中的this.props.children
阿新 • • 發佈:2018-05-10
ren react () AC 當前 一個 not AR child 還是
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
。React中的this.props.children