Gelung dalaman JSX bertindak balas
P粉966979765
P粉966979765 2023-08-23 14:08:12
0
2
512
<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>
P粉966979765
P粉966979765

membalas semua(2)
P粉609866533

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>
P粉937769356

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.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan