获取 React 元素的子元素（children）。

Question

我遇到了一个问题，希望解决，也许有人能回答。

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

我想检查子组件是否具有某些属性。

子组件

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

父组件

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

我想获取子视图的属性值。可以使用useRef来实现，但这并不是通用和动态的方法。

我的问题是，是否有一种方法可以获取子元素的这些属性？

提前感谢。 Eden.

- Eden Eliel

---

我想知道如何使用useRef来做到这一点，因为我相当确定你不可以。组件属性与它们的HTML表示之间没有关系。 - Dennis Vash

Answer 1

您可以使用React.Children API检查Parent的子项属性。

在此示例中，我们检查每个Parent的子项属性并记录它们。

如果您想深入到更深层次（例如子级的子级等），请使用递归和归纳步骤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>
  );
};

- Dennis Vash