React Fragments

  • Post
    React Fragments

    Di React, kapan pun Anda ingin merender sesuatu di layar, Anda perlu menggunakan metode render di dalam komponen. Metode render ini dapat mengembalikan satu elemen atau beberapa elemen. Metode render hanya akan merender satu node root di dalamnya dalam satu waktu. Namun, jika Anda ingin mengembalikan beberapa elemen, metode render akan memerlukan tag ‘ div ‘ dan meletakkan seluruh konten atau elemen di dalamnya. Node tambahan ke DOM ini terkadang menghasilkan format yang salah dari output HTML Anda dan juga tidak disukai oleh banyak pengembang.

    Contoh

    1. // Rendering with div tag
    2. classApp extendsComponent {
    3. render() {
    4. return (
    5. //Extraneous div element
    6. <div>
    7. <h2> Hello World! </h2>
    8. <p> Welcome to the JavaTpoint. </p>
    9. </div>
    10. );
    11. }
    12. }

    Untuk mengatasi masalah ini, React memperkenalkan Fragments dari versi 16.2 ke atas. Fragmen memungkinkan Anda mengelompokkan daftar anak-anak tanpa menambahkan node tambahan ke DOM.

    Sintak

    1. <React.Fragment>
    2. <h2> child1 </h2>
    3. <p> child2 </p>
    4. .. ….. …. …
    5. </React.Fragment>

    Contoh

    1. // Rendering with fragments tag
    2. classApp extendsComponent {
    3. render() {
    4. return (
    5. <React.Fragment>
    6. <h2> Hello World! </h2>
    7. <p> Welcome to the JavaTpoint. </p>
    8. </React.Fragment>
    9. );
    10. }
    11. }

    Mengapa kami menggunakan Fragmen?

    Alasan utama menggunakan tag Fragmen adalah:

    1. Itu membuat eksekusi kode lebih cepat dibandingkan dengan tag div.
    2. Dibutuhkan lebih sedikit memori.

    Fragmen Sintak Pendek

    Ada juga singkatan lain untuk mendeklarasikan fragmen untuk metode di atas. Sepertinya tag kosong di mana kita dapat menggunakan ‘<>’ dan ” alih-alih ‘ React.Fragment ‘.

    Contoh

    1. // Rendering dengan sintaks pendek
    2. class Columns  extends Component {
    3. render () {
    4. return  (
    5. <>
    6. <h2> Halo Dunia! </h2>
    7. <p> Selamat datang di JavaTpoint </p>
    8. </>
    9. );
    10. }
    11. }

    Fragmen yang Diikat

    Sintaks singkat tidak menerima atribut kunci. Anda memerlukan kunci untuk memetakan koleksi ke array fragmen seperti untuk membuat daftar deskripsi. Jika Anda perlu memberikan kunci, Anda harus mendeklarasikan fragmen dengan sintaks < React.Fragment > eksplisit .

    Catatan: Kunci adalah satu-satunya atribut yang dapat diteruskan dengan Fragmen.

    Contoh

    1. Function = (props) {
    2. return (
    3. <Fragment>
    4. {props.items.data.map (item => (
    5. // Tanpa ‘key’, React akan memberikan peringatan key
    6. <React.Fragment key = {item.id}>
    7. <h2> {item.name} </h2>
    8. <p> {item.url} </p>
    9. <p> {item.description} </p>
    10. </React.Fragment>
    11. ))}
    12. </Fragment>
    13. )
    14. }

    credit. javatpoint

Tagged: 

  • You must be logged in to reply to this topic.