Bagaimanakah Notasi Spread Harta Memudahkan Hantaran Prop dalam 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}>

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}>

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>
    );
  }
}

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")
);

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!