Apakah yang '...' (Spread Syntax) Lakukan dalam React JSX?

Notasi Spread Harta dalam React

Apakah tujuan tiga titik (...) dalam kod JSX dalam React?

Titik dalam keadaan ini mewakili notasi sebaran sifat. Diperkenalkan pada ES2018, ia telah lama disokong dalam React melalui transpilasi.

Notasi hamparan sifat membolehkan anda "menyebarkan" sifat terhitung satu objek ke sifat objek lain. Dalam kes React, sintaks {...this.props} menyebarkan sifat objek props ke elemen Modal.

Sebagai contoh, jika this.props mengandungi { a: 1, b: 2 }, kod berikut:

<Modal {...this.props} title='Modal heading' animation={false}>

sama dengan:

<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>

Sebaran harta notasi adalah dinamik, bermakna ia akan memasukkan apa sahaja sifat yang terdapat dalam objek props semasa runtime. Ini boleh berguna untuk menghantar berbilang sifat daripada komponen induk kepada anak tanpa mengisytiharkan setiap satu secara eksplisit.

Memandangkan kanak-kanak juga merupakan harta prop, notasi hamparan harta akan menyertakannya. Oleh itu, sebarang elemen anak yang dipaparkan antara teg pembuka dan penutup komponen induk akan diteruskan kepada komponen anak.

Atas ialah kandungan terperinci Apakah yang '...' (Spread Syntax) Lakukan dalam React JSX?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!