如何在 React 中将 Props 传递给子组件？-js教程-PHP中文网

如何在 React 中将 Props 传递给子组件？

Barbara Streisand

发布： 2024-12-18 19:08:20

原创

323 人浏览过

How Can I Pass Props to Children Components in React?

将 Props 传递给 {this.props.children}

定义接受子元素的通用组件时，有必要将特定属性传递给所有这些子组件。在 React 组件范例中，这是通过使用 {this.props.children} 来实现的。然而，问题出现了：如何传递这些属性？

使用新道具克隆子元素

React.Children 提供了一个实用程序来迭代和克隆子元素，允许您创建修改后的子元素带有新 props 的版本：

const Child = ({ childName, sayHello }) => <button onClick={() => sayHello(childName)}>{childName}</button>;

function Parent({ children }) {
  function sayHello(childName) {
    console.log(`Hello from ${childName} the child`);
  }

  const childrenWithProps = React.Children.map(children, (child) => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { sayHello });
    }
    return child;
  });

  return <div>{childrenWithProps}</div>;
}

登录后复制

注意： 一般不建议使用由于其潜在的脆弱性和潜在的类型安全问题，请使用cloneElement方法。

以上是如何在 React 中将 Props 传递给子组件？的详细内容。更多信息请关注PHP中文网其他相关文章！