React的this.props.children

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

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的詳細用法，可以參考此處。

相關文章