reactjs - 在 render 方法中递归地检查组件的子组件

Question

我创建了一个名为 labeledElement 的组件，它基本上只是生成

<label {...props}>
    <span class="label">{props.label}</span>
    {props.children}
</label>

但是，如果子项包含多个输入或按钮，则这是一个问题，因为标签会将点击传播并聚焦到子项。在这种情况下，我想使用 div 而不是标签。

是否可以在我的render方法中分析子项，看看是否有多个子项匹配'button input textarea select'，并根据此输出标签还是 div？

我对如何将其组合在一起有一些想法，但所有这些都需要连接到 componentDidMount，检查 DOM 并调整状态，这似乎绝对是错误的做事的方式。

Answer 1

您可以像这样递归地迭代子项:

function visitReactElements(element, callback, depth=0) => {
  if (!element || !element.props) return;

  callback(element, depth);

  React.Children.forEach(element.props.children, (element) => {
    visitReactElements(element, callback, depth + 1);
  });
}

jsbin

你正在走一条简单的 react 之路，然后将其扭曲成复杂的魔法野兽。谨慎行事。