时间戳

首页 > 解决方案 > 我可以通过 React.Children.toArray 从父级访问函数的子级吗？

javascript - 我可以通过 React.Children.toArray 从父级访问函数的子级吗？

问题描述

我可以通过父级访问函数的子级React.Children.toArray吗？

这是一个Parent计算孩子的函数。在现实世界的例子中，它应该对孩子们做点什么。

function Parent({ children }) {
  // Flat children.
  function flatChildren(arr, initial) {
    return arr.reduce((accumulator, current) => {
      if (React.isValidElement(current) && current.props.children) {
        return flatChildren(React.Children.toArray(current.props.children), [
          ...accumulator,
          current
        ]);
      }
      return [...accumulator, current];
    }, initial || []);
  }

  const flat = flatChildren(React.Children.toArray(children));
  return <div>Length: {flat.length}</div>;
}

这是一个Child功能：

function Child() {
  return (
    <div>
      <span>test</span>
    </div>
  );
}

现在，如果我使用函数或普通的 React Elements 渲染Parent，它的工作方式就不一样了：

<>

  <Parent>
    <div>
      <span>test</span>
    </div>
  </Parent>

  <Parent>
    <Child />
  </Parent>

</>

第一个显示“长度：3”，第二个显示“长度：1”。

我可以理解为什么：React 没有执行这个功能：它是一个黑盒子。尽管如此，组件还是被渲染了，所以必须有一种方法来映射实际渲染的子级。可能吗？

旁注：我实际上调用useEffet了我Parent的解析孩子，所以也许我可以在这里做点什么。

标签： javascriptreactjsjsxchildrenreact-hooks

解决方案

推荐阅读