在vue裡, 渲染子元件可以使用slot插槽, 不僅能指定子元件渲染位置, 還能通過指定name屬性來有選擇地渲染, 但是在react裡就沒有這種元件了。
當然, react也不是沒有辦法實現slot元件的功能, 通常就是用 this.props.children 這個屬性:
class parent extends component
) }
}
但是又有乙個問題, 如果我們還想對子元件傳參的話該怎麼辦呢?顯然這樣寫的話是沒辦法實現的。
其中一種辦法就是使用redux等狀態管理外掛程式來實現, 但是如果你的專案不是特別大的話, 無疑會搞得更複雜, 並且還會增加額外的學習成本。
所以我們可以用第二種方法: 使用react自帶的react.children和react.cloneelement這兩個個api。
借助react.children, 我們可以這樣做, 給子元件傳遞屬性:
class parent extends component )})}
) }
}
有的人可能會說: 我不使用react.child, 直接對props.children使用map函式遍歷照樣可以啊。
是的, 在一些特殊情況下, 是可以直接對props.children使用map函式, 但那僅限於所有子元素都是元件的情況下, 因為從本質上來講，props.children可以使任何的型別，比如陣列、函式、物件等等,
如果props.children不是陣列, 那就gg了:
然而使用react.children.map函式，無論是什麼都不會報錯。
所以我們要盡量使用react.children來操作props.children。
對於react.children的詳細理解可以參考這裡。
children和childNodes 的區別
1，childnodes 屬性，標準的，它返回指定元素的子元素集合，包括html節點，所有屬性，文字。可以通過nodetype來判斷是哪種型別的節點，只有當nodetype 1時才是元素節點，2是屬性節點，3是文字節點。有些人錯誤的使用 去取該集合元素，下表列出各瀏覽器對childnodes i 的...
解讀jQuery篩選器children
一篇不錯的詳細教程，解讀jquery篩選器children jquery的選擇包含兩種，一種是選擇器，一種是篩選器。篩選器是對選擇器選定的jquery物件做進一步選擇。children 是乙個篩選器，顧名思義就是篩選孩子，篩選那些符合條件的孩子。完整的格式如下 children expr 其中chi...
jQuery遍歷之children 方法
jquery是乙個合集物件，如果想快速查詢合集裡面的第一級子元素，此時可以用children 方法。這裡需要注意 children selector 方法是返回匹配元素集合中每個元素的所有子元素 僅兒子輩，這裡可以理解為就是父親 兒子的關係 理解節點查詢關係 如果是 div children 那麼意...