Question

到目前为止，这是我的代码：

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)
}

我试图找到＆＃34;每一个＆＃34;已在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那样做，因为我不想在任何地方乱扔垃圾）？

获取React元素

0 个答案: