Gelung dalaman JSX bertindak balas
P粉966979765
2023-08-23 14:08:12
<p>Saya cuba melakukan sesuatu seperti berikut dalam React JSX (di mana ObjectRow ialah komponen yang berasingan): </p>
<pre class="brush:php;toolbar:false;"><tbody>
untuk (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody></pre>
<p>Saya sedar dan faham mengapa ini tidak sah JSX, kerana JSX memetakan fungsi panggilan. Walau bagaimanapun, datang dari dunia templat dan baharu kepada JSX, saya tidak pasti bagaimana untuk mencapai matlamat di atas (menambah komponen beberapa kali). </p>
Saya tidak pasti sama ada ini sesuai untuk situasi anda, tetapi biasanya peta ialah jawapan yang bagus.
Jika ini kod anda menggunakan gelung untuk:
Anda boleh menggunakan peta untuk menulis seperti ini一>:
Sintaks ES6:
Fikirkan ia seolah-olah anda hanya memanggil fungsi JavaScript. Anda tidak boleh menggunakan gelung
for
untuk menghantar hujah kepada panggilan fungsi:Lihat cara fungsi
tbody
dihantar sebagai argumen kepadatbody
如何作为参数传递给for
gelung - menyebabkan ralat sintaks.Tetapi anda boleh mencipta tatasusunan dan menghantarnya sebagai parameter:
Anda pada asasnya menggunakan struktur yang sama apabila menggunakan JSX:
Dengan cara ini, contoh JavaScript saya menukarkan perkara yang hampir sama seperti contoh JSX. Cuba gunakan Babel REPL untuk merasai cara JSX berfungsi.