到目前为止,这是我的代码:
var allComponents = []
function getAllComponents (el) {
if (!el) return
if (!el.type) return
allComponents.push(el.type)
// Try to get all children components
React.Children.forEach(el.props.children, getAllComponents)
}
我试图找到"每一个"已在react元素内创建的组件,但上述代码只能获得直接props.children
。
这意味着给出了这个例子React元素:
function ComponentA (props) {
return (
<div>
<h1>Stuff</h1>
<ComponentB/>
<ComponentC/>
{props.children}
</div>
)
}
var el = (
<ComponentA>
<ComponentD/>
<ComponentE/>
</ComponentA>
)
getAllComponents(el) //-> [ComponentA, ComponentD, ComponentE]
输出只有ComponentA
,ComponentD
和ComponentE
,而不是ComponentB
或ComponentC
,因为它们不在props.children
但是而是组件的一部分。
有没有办法以编程方式获取ComponentB
和ComponentC
(没有像refs那样做,因为我不想在任何地方乱扔垃圾)?