Bagaimana untuk Menyalurkan Props dengan Cekap kepada this.props.children dalam React?

Cara Menghantar Props kepada {this.props.children}

Pengenalan

Dalam React, anda mungkin menghadapi senario yang anda mahukan untuk menggunakan komponen pembalut untuk merangkum sekumpulan komponen kanak-kanak dan menurunkan beberapa sifat biasa kepada mereka.

Mengklon Kanak-kanak dengan Alat Bantu Baharu

Satu pendekatan ialah dengan gunakan React.Children untuk mengulangi kanak-kanak dan mengklon setiap elemen dengan prop baharu menggunakan React.cloneElement. Walau bagaimanapun, kaedah ini tidak disyorkan kerana kemungkinan kerapuhan kod.

<br>const Child = ({ childName, sayHello }) => (<br> <butang onClick={() => sayHello(childName)}>{childName}</button><br>);</p>
<p>fungsi Ibu Bapa({anak }) {<br> fungsi sayHello(childName) {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">console.log(`Hello from ${childName} the child`);

Salin selepas log masuk

}

const childrenWithProps = React.Children.map(children, child => {

if (React.isValidElement(child)) {
  return React.cloneElement(child, { sayHello });
}
return child;

});

kembali

{childrenWithProps}

;
}

function App() {
// Kurang jenis selamat tetapi alternatif lebih ringkas
pulangan (

<Parent>
  <Child childName="Billy" />
  <Child childName="Bob" />
</Parent>

);
}

ReactDOM.render(, document.getElementById("container"));

Alternatif kepada Pengklonan Kanak-kanak

Untuk menurunkan sifat kepada kanak-kanak, pertimbangkan alternatif berikut:

• Keadaan Mengangkat: Alihkan sifat kongsi kepada keadaan komponen induk dan turunkannya melalui prop.
• API Konteks: Cipta Objek konteks untuk berkongsi data merentas komponen, tanpa mengira hubungan hierarkinya.
• Render Props: Tentukan prop render dalam komponen wrapper dan hantarkannya kepada komponen anak sebagai fungsi yang mengambil props sebagai input.

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