Bagaimanakah Saya Boleh Menyalurkan Props kepada Komponen Kanak-kanak dalam Reaksi?

Melalukan Props kepada {this.props.children}

Apabila mentakrifkan komponen generik yang menerima elemen kanak-kanak, ia menjadi perlu untuk menurunkan sifat khusus kepada semua komponen kanak-kanak tersebut . Dalam paradigma komponen React, ini dicapai melalui penggunaan {this.props.children}. Walau bagaimanapun, persoalan timbul: bagaimana anda menurunkan sifat tersebut?

Mengklon Kanak-Kanak dengan Alat Baharu

React.Children menyediakan utiliti untuk mengulang dan mengklon elemen kanak-kanak, membolehkan anda membuat diubah suai versi dengan prop baharu:

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

Nota: Biasanya tidak disyorkan untuk menggunakan pendekatan cloneElement kerana potensi kerapuhan dan potensi isu keselamatan jenis.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyalurkan Props kepada Komponen Kanak-kanak dalam Reaksi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!