Bagaimana untuk Memberi Props dengan Berkesan kepada `this.props.children` dalam React?

Cara menghantar props kepada {this.props.children}

Niat soalan ini adalah untuk menjelaskan cara yang betul untuk menghantar props kepada semua kanak-kanak dalam pembungkus komponen yang menggunakan {this.props.children} untuk rendering.

Mengklon Kanak-kanak dengan Baharu Props

Satu pendekatan melibatkan penggunaan React.Children, yang mengulangi setiap elemen kanak-kanak dan mengklonkannya dengan prop baharu melalui React.cloneElement. Walau bagaimanapun, kaedah ini secara amnya tidak digalakkan kerana ia boleh membawa kepada kod yang rapuh.

Untuk menggambarkan, pertimbangkan kod berikut:

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

Walaupun pendekatan ini membenarkan pemindahan prop kepada kanak-kanak, ia kurang selamat jenis dan berkemungkinan mengelirukan untuk dibaca berbanding dengan alternatif berikut:

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

Pendekatan terakhir ini lebih secara eksplisit menyampaikan niat untuk menyampaikan prop kepada kanak-kanak dan mengekalkan keselamatan jenis.

Atas ialah kandungan terperinci Bagaimana untuk Memberi Props dengan Berkesan kepada `this.props.children` dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!