javascript - 获取 React.element 的元素(子元素)

Question

所以我有一个问题想解决，也许有人对此有答案。

我的问题是我有一个组件，它有自己的 View 和组件，同时我有一个使用这个特定组件的父组件。

我想检查子组件的子组件是否有一些 Prop 。

子组件

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

父组件

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

所以我想获取 subview 的 Prop 值。我可以对这些 View 使用 useRef，但它不是那么通用和动态。

我的问题是，有什么方法可以获取 child 的那些元素吗？

提前致谢伊甸园。

Answer 1

您可以使用 React.Children API 检查 Parent 的 child 的 props。

在这个例子中，我们检查每个 Parent 的 child 的 props 并记录它们。

如果你想进入更深层次(Child of Child of Child 等)，用 recursion 来做具有归纳步骤 child.props.children(如果可用)。

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>
  );
};