2 回答

TA貢獻1805條經驗 獲得超10個贊
this.props 對象的屬性與組件的屬性一一對應,但是有一個例外,就是 this.props.children 屬性。它表示組件的所有子節點
var NotesList = React.createClass({render: function() {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);
上面代碼的 NoteList 組件有兩個 span 子節點,它們都可以通過 this.props.children 讀取,運行結果如下。
hello
world
這里需要注意, this.props.children 的值有三種可能:如果當前組件沒有子節點,它就是 undefined ;如果有一個子節點,數據類型是 object ;如果有多個子節點,數據類型就是 array 。所以,處理 this.props.children 的時候要小心。
React 提供一個工具方法 React.Children 來處理 this.props.children 。我們可以用 React.Children.map 來遍歷子節點,而不用擔心 this.props.children 的數據類型是 undefined 還是 object。

TA貢獻1801條經驗 獲得超16個贊
在React中,當涉及組件嵌套,在父組件中使用props.children把所有子組件顯示出來。如下: function ParentComponent(props){ return ( {props.children} ) } 如果想把父組件中的屬性傳給所有的子組件
- 2 回答
- 0 關注
- 473 瀏覽
添加回答
舉報