如何在 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中文網其他相關文章！