React的this.props.children

看風景就發表於2018-09-13

this.props用來獲取元件從外部傳入的屬性,但是this.props.children比較特殊,它是由React給新增上的,表示元件的所有子節點。
this.props.children可以用來讀取子節點,或者渲染子節點。
this.props.children所代表的子節點,不僅僅是指一個DOM節點,也包括子元件,它們是可以混合顯示的,例如:

<Grid>
  Here is a row:
  <Row />
  Here is another row:
  <Row />
</Grid>

1. this.props.children的值型別

this.props.children的值有三種可能:

1. 當前元件沒有子節點,為 undefined
2. 若只有一個子節點,型別為 Object
3. 若有多個子節點,型別為 Array

通常不直接處理this.props.children,而是用React.Children.map/forEach等API來操作,
該API進行了型別處理,保證不會出錯。

React.children的詳細用法,可以參考此處

相關文章