Rumah > hujung hadapan web > tutorial js > Bagaimanakah Notasi Spread Harta Memudahkan Hantaran Prop dalam React JSX?

Bagaimanakah Notasi Spread Harta Memudahkan Hantaran Prop dalam React JSX?

Linda Hamilton
Lepaskan: 2024-12-11 08:43:10
asal
258 orang telah melayarinya

How Does Property Spread Notation Simplify Prop Passing in React JSX?

Notasi Spread Harta dalam React JSX

React menawarkan cara ringkas untuk menghantar prop kepada komponen melalui sintaks JSX menggunakan notasi spread harta.

Apakah itu Notasi Hamparan Harta (...)?

Tiga titik, atau ..., dalam kod yang disediakan coretan mewakili notasi penyebaran sifat. Ia membenarkan anda menyebarkan sifat sesuatu objek ke dalam sifat individu pada elemen sasaran.

Bagaimanakah ia berfungsi?

Dalam kod contoh:

<Modal {...this.props} title='Modal heading' animation={false}>
Salin selepas log masuk

yang Notasi hamparan {...this.props} menyebarkan semua sifat sendiri yang boleh dikira bagi this.props sebagai sifat diskret pada elemen Modal. Ia bersamaan dengan menulis setiap sifat secara individu:

<Modal a={this.props.a} b={this.props.b} c={this.props.c} ... title='Modal heading' animation={false}>
Salin selepas log masuk

Walau bagaimanapun, tatatanda hamparan secara dinamik menyertakan atau mengecualikan sifat berdasarkan objek yang disebarkannya.

Termasuk Elemen Anak

Jika objek yang dihamparkan mengandungi sifat kanak-kanak, ia akan disertakan dalam tatatanda hamparan. Ini kerana kanak-kanak adalah hak milik sendiri objek props. Oleh itu, elemen kanak-kanak yang diletakkan di antara teg pembuka dan penutup komponen akan dihantar kepada elemen sasaran sebagai harta kanak-kanak.

Untuk menunjukkan perkara ini, pertimbangkan contoh berikut:

class Example extends React.Component {
  render() {
    return (
      <div className={this.props.className}>
        {this.props.children}
      </div>
    );
  }
}
Salin selepas log masuk

Dalam kes ini, komponen Contoh menerima className dan prop kanak-kanak. Melepasi elemen Contoh dengan elemen kanak-kanak adalah bersamaan dengan menetapkan prop kanak-kanak secara manual:

ReactDOM.render(
  [
    <Example className="first">
      <span>Child in first</span>
    </Example>,
    <Example className="second" children={<span>Child in second</span>} />
  ],
  document.getElementById("root")
);
Salin selepas log masuk

Dengan memanfaatkan notasi hamparan sifat, React menyediakan cara yang mudah dan dinamik untuk menghantar berbilang prop kepada komponen dengan overhed minimum.

Atas ialah kandungan terperinci Bagaimanakah Notasi Spread Harta Memudahkan Hantaran Prop dalam React JSX?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan