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

<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`);

}

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

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

});

kembali

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!