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

Memahami Tujuan Tiga Titik dalam Reaksi

Apabila bekerja dengan React, anda mungkin menghadapi tiga titik (...), dikenali sebagai notasi penyebaran harta. Dalam coretan ini:

<modal title="Modal heading" animation="{false}"></modal>

"..." melakukan penyebaran sifat, mengekstrak sifat terhitung daripada this.props dan mengagihkannya sebagai sifat individu pada elemen Modal.

Sebagai contoh , jika this.props mengandungi { a: 1, b: 2 }, maka kod di atas adalah analog kepada:

<modal a="{this.props.a}" b="{this.props.b}" title="Modal heading" animation="{false}"></modal>

Tidak kira kandungan tepat ini.props, notasi hamparan memastikan bahawa mana-mana sifat "sendiri" di dalamnya disertakan.

Terutamanya, kanak-kanak dianggap "sendiri" harta, jadi ia juga akan diserahkan kepada komponen Modal. Mekanisme ini membolehkan elemen kanak-kanak diletakkan di antara teg pembuka dan penutup komponen induk, yang merupakan sintaks biasa dan berguna untuk memasukkan kanak-kanak.

Untuk menggambarkan:

class Example extends React.Component {
  render() {
    const { className, children } = this.props;
    return (
      <div classname="{className}">
      {children}
      </div>
    );
  }
}

Dalam ini contoh, Contoh menerima className dan kanak-kanak sebagai prop. Komponen atau elemen anak yang diletakkan dalam Contoh akan diberikan kepada prop kanak-kanak.

Akhirnya, notasi penyebaran sifat dalam React menawarkan kaedah yang mudah untuk menyebarkan sifat daripada komponen induk kepada anak-anaknya, memperkemas dan memudahkan pangkalan kod.

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