Question

我可以通过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>

</>

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

我可以理解为什么：React没有执行功能：这是一个黑匣子。仍然会渲染组件，因此必须有一种方法可以映射实际的渲染子级。有可能吗？

旁注：我实际上在useEffet中叫Parent来解析孩子，所以也许我可以在这里做些事情。

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

0 个答案: