获取元素（React.element的子元素）

Question

所以我有一个要解决的问题，也许有人可以解决。

我的问题是我有一个具有自己的视图和组件的组件，同时我有一个使用此特定组件的父组件。

我想检查子组件的子对象是否有一些道具。

子组件

const Child = () => {
    return (
        <View wantedArgument={true}>
            <View anotherWantedArgument={false}>
            </View>
        </View>
    )
}

父组件

const Parent = () => {
    return (
        <Child>
          
        </Child>
    )
}

所以我想获取子视图的props值。 我可以为这些View使用useRef，但是它不是那么通用和动态。

我的问题是，有没有办法让我了解孩子的那些要素？

谢谢 伊甸园。

Answer 1

您可以使用Parent API检查React.Children的孩子们的道具。

在此示例中，我们检查每个Parent的孩子的道具并记录它们。

如果您想进入更深层次（Child of Child等），请通过归纳步骤child.props.children（如果有）使用recursion。

const Child = ({ prop }) => {
  return <>{prop}</>;
};

const Parent = ({ children }) => {
  useEffect(() => {
    React.Children.forEach(children, child => {
      console.log(child.props);
    });
  }, [children]);
  return <div>{children}</div>;
};

const App = () => {
  return (
    <Parent>
      <Child prop={1} />
    </Parent>
  );
};