Bagaimanakah Saya Boleh Menghantar Props Tersuai kepada Komponen Kanak-kanak dalam Penghala Reaksi v4?

Memperluas Komponen Penghala dengan Alat Tersuai dalam Penghala Reaksi v4

Apabila membina aplikasi React berbilang halaman menggunakan Penghala Reaksi, selalunya wajar untuk menghantar prop tersuai kepada komponen anak. Secara lalai, komponen anak mewarisi objek this.props.route, tetapi ini mungkin tidak selalu mengandungi prop yang dimaksudkan.

Isu: Undefined this.props.route for Child Components

Isu boleh diperhatikan apabila mengakses this.props.route dalam komponen kanak-kanak, yang mengembalikan tidak ditentukan. Ini kerana kaedah pemaparan lalai Penghala Reaksi tidak menyokong peragaan hantaran tersuai.

Penyelesaian: Menggunakan Prop Render

Untuk menghantar prop tersuai, manfaatkan prop pemaparan komponen Laluan. Ini melibatkan menyelaraskan definisi komponen dalam prop pemaparan:

<code class="javascript"><Route path="/home" render={(props) => <Home test="hi" {...props} />} /></code>

Mengakses Props Tersuai dalam Komponen Kanak-kanak

Dalam komponen anak, akses prop tersuai melalui ini.props:

<code class="javascript">console.log(this.props.test); // Outputs "hi"</code>

Menyebarkan Prop Penghala Lalai

Apabila menggunakan prop pemaparan, adalah penting untuk menyebarkan prop penghala lalai (lokasi, sejarah, padanan, dll.) kepada komponen anak. Ini dicapai dengan memasukkan {...props} dalam prop render:

<code class="javascript"><Route path="/home" render={(props) => <Home test="hi" {...props} />} /></code>

Conclusion

Dengan menggunakan prop render, anda boleh menghantar prop tersuai dengan mudah kepada komponen penghala dalam React Router v4. Ingat untuk menyebarkan prop penghala lalai untuk memastikan kefungsian komponen anak.

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