在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

你走的是一条简单反应的道路,将它扭曲成一个复杂的魔法野兽.谨慎行事.