reactjs - 在 React 中递归克隆和修改子组件 - 包括其他组件的子组件

Question

我读过这篇文章https://stackoverflow.com/a/42498730/64105 ，并且它可以很好地运行 <TitleList> 中的所有元素。渲染时向下:

  <TitlesList>
    <ul>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
    </ul>
  </TitlesList>

...但当分成多个组件时则不然，例如:

const List = () => (
  <ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
  </ul>
);

<TitlesList>
  <List />
</TitlesList>

有没有办法在渲染时递归到子组件并克隆/修改它们的元素？

有关运行示例，请参阅 https://codesandbox.io/s/friendly-ives-c8df0

Answer 1

这是我需要修改的内容才能使其正常工作:

function recursiveMap(children, fn) {
  return React.Children.map(children, child => {
    if (!React.isValidElement(child)) {
      return child;
    }

    if (typeof child.type === "function") {
      child = child.type();
    }

    if (child.props.children) {
      child = React.cloneElement(child, {
        children: recursiveMap(child.props.children, fn)
      });
    }

    return fn(child);
  });
}

我注意到，当一个组件作为子组件传递时，child.type 是一个函数，而不是一个对象。因此，为了获取组件的子组件，您只需调用 child.type()。

Here is the CodeSandbox example .