Gelung dalaman JSX bertindak balas

Question

Saya cuba melakukan sesuatu seperti berikut dalam React JSX (di mana ObjectRow ialah komponen yang berasingan):

<tbody>
    untuk (var i=0; i < numrows; i++) {
        <ObjectRow/>
    }
</tbody>

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).

Answer 1

Saya tidak pasti sama ada ini sesuai untuk situasi anda, tetapi biasanya peta ialah jawapan yang bagus.

Jika ini kod anda menggunakan gelung untuk:

<tbody>
    for (var i=0; i < objects.length; i++) {
        <ObjectRow obj={objects[i]} key={i}>
    }
</tbody>

Anda boleh menggunakan peta untuk menulis seperti ini:

<tbody>
    {objects.map(function(object, i){
        return <ObjectRow obj={object} key={i} />;
    })}
</tbody>

Sintaks ES6:

<tbody>
    {objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>

Answer 2

Fikirkan ia seolah-olah anda hanya memanggil fungsi JavaScript. Anda tidak boleh menggunakan gelung for untuk menghantar hujah kepada panggilan fungsi:

return tbody(
    for (let i = 0; i < numrows; i++) {
        ObjectRow()
    } 
)

Lihat cara fungsi tbody dihantar sebagai argumen kepada tbody 如何作为参数传递给 for gelung - menyebabkan ralat sintaks.

Tetapi anda boleh mencipta tatasusunan dan menghantarnya sebagai parameter:

const rows = [];
for (let i = 0; i < numrows; i++) {
    rows.push(ObjectRow());
}
return tbody(rows);

---

Anda pada asasnya menggunakan struktur yang sama apabila menggunakan JSX:

const rows = [];
for (let i = 0; i < numrows; i++) {
    // note: we are adding a key prop here to allow react to uniquely identify each
    // element in this array. see: https://reactjs.org/docs/lists-and-keys.html
    rows.push(<ObjectRow key={i} />);
}
return <tbody>{rows}</tbody>;

Dengan cara ini, contoh JavaScript saya menukarkan perkara yang hampir sama seperti contoh JSX. Cuba gunakan Babel REPL untuk merasai cara JSX berfungsi.