如何在 React 中有效地将 Props 传递给 `this.props.children`？

如何将 props 传递给 {this.props.children}

这个问题的目的是阐明将 props 传递给包装器中的所有子级的正确方法利用 {this.props.children} 进行渲染的组件。

使用 New 克隆子组件Props

一种方法涉及使用 React.Children，它迭代每个子元素并通过 React.cloneElement 使用新的 props 克隆它们。但是，通常不鼓励使用这种方法，因为它可能会导致代码脆弱。

为了说明这一点，请考虑以下代码：

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

function Parent({ children }) {
  // This `sayHello` function is passed down to child elements.
  function sayHello(childName) {
    console.log(`Hello from ${childName} the child`);
  }

  const childrenWithProps = React.Children.map(children, child => {
    // `React.isValidElement` ensures the child is a valid React element.
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { sayHello });
    }
    return child;
  });

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

虽然这种方法允许将 props 传递给子级，与以下替代方案相比，它的类型安全性较差，并且可能会造成阅读混乱：

function Parent({ children }) {
  // This `sayHello` function is passed down to child elements.
  function sayHello(childName) {
    console.log(`Hello from ${childName} the child`);
  }

  // Directly passing props to children.
  return <div>{children(sayHello)}</div>;
}

后一种方法更明确地传达了将 props 传递给的意图儿童并保持类型安全。

以上是如何在 React 中有效地将 Props 传递给 `this.props.children`？的详细内容。更多信息请关注PHP中文网其他相关文章！