Panduan Lengkap Untuk props.children In React

Saya membangun dengan React selama berbulan-bulan tanpa memahami sepenuhnya kuasa sebenar model komponen React. Suatu hari saya memutuskan untuk menyelami komposisi, dan inilah yang saya pelajari.

Komponen Reaksi dan Kanak-kanak

Dalam React, komponen boleh mempunyai satu, ramai atau tiada anak. Hebat, tetapi tunggu — apa itu "kanak-kanak"? Mari jelaskan dengan contoh:

<Profile>
  <ProfileImage src="/asset/profile-img.png" />
  <ProfileDetails name="Antonello" surname="Zanini" />
</Profile>

Komponen Profil mempunyai dua anak: ProfileImage dan ProfileDetails, manakala kedua-dua ini tidak mempunyai anak.

"Dalam ungkapan JSX yang mengandungi kedua-dua teg pembukaan dan teg penutup, kandungan antara teg tersebut dihantar sebagai prop khas: props.children" — React dokumentasi

Pada asasnya, props.children ialah prop khas, dihantar secara automatik kepada setiap komponen, yang boleh digunakan untuk memaparkan kandungan yang disertakan di antara teg pembukaan dan penutup apabila menggunakan komponen. Komponen jenis ini dikenal pasti oleh dokumentasi rasmi sebagai "kotak".

Mengenal pasti Komponen melalui Sintaks JSX

Dalam JSX React, komponen dengan kanak-kanak sentiasa dikenal pasti dengan teg pembuka dan teg penutup. Setiap kanak-kanak mesti diletakkan di antara dua tag ini, seperti yang telah kita lihat di atas. Apabila komponen tidak mempunyai anak, anda boleh menggunakan sama ada dengan atau , tetapi sintaks yang terakhir lebih disukai. Tujuan teg menutup sendiri adalah untuk menjadikan kod lebih pendek dan lebih mudah dibaca.

props.children in Actions

Mari kita anggap bahawa kita ingin mencipta komponen ImageSlider. Matlamat kami adalah untuk menggunakan komponen seperti ini:

<ImageSlider>
  <img src="/assets/img-1.pg" />
  <img src="/assets/img-2.pg" />
  <img src="/assets/img-3.pg" />
</ImageSlider>

Seperti yang anda boleh lihat, ImageSlider terdiri daripada beberapa yang boleh diakses dan diberikan melalui props.children.

export default function ImageSlider(props) { 
    return (
      <div className="img-slider">
        {props.children}
      </div>
    );  
}

Terima kasih kepada props.children kami boleh menyarangkan kandungan kami di dalam komponen, sama seperti kami menyusun elemen HTML biasa.

Apakah Jenis Kandungan Yang Dibenarkan untuk props.children?

Kandungan yang dihantar kepada komponen melalui props.children boleh termasuk

undefined, null, Boolean, nombor, rentetan, elemen React atau tatasusunan mana-mana jenis ini secara rekursif. Ia juga boleh menjadi fungsi mengembalikan salah satu daripada jenis ini.

Sila ambil perhatian bahawa, seperti yang dinyatakan dalam dokumentasi React, false, null, undefined dan true adalah kanak-kanak yang sah, tetapi mereka akan diabaikan dan tidak diberikan. Jika anda mahu palsu, benar, batal atau tidak ditentukan untuk dipaparkan, anda mesti menukarnya terlebih dahulu kepada rentetan:

<MyComponent>
  { String(undefined) }
</MyComponent>

Mengapa props.children Sangat Penting?

props.children membolehkan kami mengarang komponen, dan oleh itu antara muka bahagian hadapan kami sebagai akibatnya; memanfaatkan kuasa sebenar model komponen React.

"React mempunyai model gubahan yang berkuasa dan kami mengesyorkan menggunakan gubahan dan bukannya warisan untuk menggunakan semula kod antara komponen." — Dokumentasi bertindak balas

Seperti yang diliputi dalam dokumentasi rasmi, kadangkala anda mungkin perlu mengisi berbilang "lubang" dalam komponen. Dalam kes sedemikian, daripada menggunakan props.children, mentakrifkan berbilang prop tersuai mungkin merupakan pendekatan yang lebih baik; seperti yang ditunjukkan dalam contoh berikut:

function SplitPane(props) {
  const { left, right } = props

  return (
    <div className="split-pane">
      <div className="left-pane">
        { left }      
      </div>
      <div className="right-pane">
        { right }      
      </div>
    </div>
  );
}

React.Kanak-kanak

"React.Children menyediakan utiliti untuk menangani struktur data props.children legap" — Dokumentasi React

Mengapa props.children merupakan "struktur data legap"?

Oleh kerana props.children boleh terdiri daripada satu, banyak atau tiada elemen anak, yang bermaksud nilainya boleh menjadi nod anak tunggal, tatasusunan nod anak atau tidak ditentukan masing-masing. Terima kasih kepada React.Children API, kami boleh berurusan dengan props.children dengan mudah tanpa mengambil kira setiap jenisnya. Syukurlah, semuanya akan diuruskan untuk kami di latar belakang.

Pada masa penulisan, React.Children menawarkan lima utiliti berbeza:

• peta

• untukSetiap

• kira

• hanya

• toArray

Mari kita lihat bagaimana kita boleh menggunakan React.Children dengan contoh. Katakan kita mahu menambah kelas CSS khas img-special-class kepada setiap anak komponen ImageSlider. Ini boleh dilakukan seperti berikut:

export default function ImageSlider(props) {
  const { children } = props

  return (
    <div className="img-slider">
      {
        React.Children.map(children, (child) =>
          React.cloneElement(child, {
              className: `${child.props.className} img-special-class`
            })
        )
      }
    </div>
  );
}

React.Children.map allows us to iterate over props.children and transform each element according to the function passed as the second parameter. To achieve our goal, we used React.cloneElement. This is because we needed to change the value of the className prop, but props are immutable in React, so we had to clone each child.

Conclusion

Mastering props.children is essential to becoming a great React developer and beginning to harness the full potential of the React component model. props.children is one of React's most useful features, since it gives us the ability to render child components. Because of this, every developer should know how to use it properly.

I hope this article helps you master composition in React.

---

The post "A Complete Guide To props.children In React" appeared first on Writech.

Atas ialah kandungan terperinci Panduan Lengkap Untuk props.children In React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!