React插槽超清晰超簡潔講解

<Window display={this.state.display}>
//父組件在子組件中傳入的三個div,
<div papa="title">title</div>
<div papa="content">content</div>
<div papa="foot">foot</div>
</Window>

//父組件在子組件中傳入的三個div,這三個div會默認經過props傳到子組件中數組

clipboard.png

//子組件必定要使用this.props.children才能使用這三個div
{this.props.children}//這是一個數組 會直接把三個div直接顯示在子組件中
{this.props.children[0]}//只是把這個children數組第一個元素放到子組件中
{this.props.children.filter(itme => itme.props.papa=="title")}//這是經過filter篩選出指定自定義屬性的
名稱來放入到子組件中
相關文章
相關標籤/搜索