Portal React

  • Post
    Portal React

    Versi React 16.0 memperkenalkan portal React pada September 2017 . Portal React menyediakan cara untuk merender elemen di luar hierarki komponennya, yaitu dalam komponen terpisah.

    Sebelum versi React 16.0, sangat sulit untuk merender komponen anak di luar hierarki komponen induknya. Jika kita melakukan ini, itu melanggar konvensi di mana komponen perlu dirender sebagai elemen baru dan mengikuti hierarki induk-anak . Di React, komponen induk selalu ingin pergi kemana komponen anaknya pergi. Itulah mengapa konsep portal React masuk.

    Sintaksis

    1. createPortal(child, container)

    Di sini, argumen pertama (anak) adalah komponen, yang bisa berupa elemen, string, atau fragmen, dan argumen kedua (wadah) adalah elemen DOM.

    Contoh sebelum React v16

    Umumnya, saat Anda ingin mengembalikan elemen dari metode render komponen, itu dipasang sebagai div baru ke DOM dan merender turunan dari komponen induk terdekat.

    1. render() {
    2. // React mounts a new div into the DOM and renders the children into it
    3. return (
    4. <div>
    5. {this.props.children}
    6. </div>
    7. );
    8. }

    Contoh menggunakan portal

    Namun, terkadang kami ingin memasukkan komponen anak ke lokasi yang berbeda di DOM. Artinya, React tidak ingin membuat div baru. Kita bisa melakukan ini dengan membuat portal React.

    1. render() {
    2. returncreatePortal(
    3. this.props.children,
    4. myNode,
    5. );
    6. }

    fitur

    • Ia menggunakan React versi 16 dan API resminya untuk membuat portal.
    • Ini memiliki fallback untuk React versi 15.
    • Ini memindahkan komponen turunannya ke portal React baru yang ditambahkan secara default ke document.body.
    • Itu juga dapat menargetkan elemen DOM yang ditentukan pengguna.
    • Ini mendukung rendering sisi server
    • Ini mendukung array kembali (tidak diperlukan div pembungkus)
    • Ini menggunakan <Portal /> dan <PortalWithState /> sehingga tidak ada kompromi antara fleksibilitas dan kenyamanan.
    • Itu tidak menghasilkan kekacauan DOM.
    • Tidak ada ketergantungan, minimalis.

    Kapan digunakan?

    Kasus penggunaan umum portal React meliputi:

    • Modal
    • Tooltips
    • Menu mengambang
    • Widget

    Instalasi

    Kita dapat menginstal portal React menggunakan perintah berikut.

    1. $ npm install react-portal –save

    Penjelasan dari React Portal

    Buat proyek React baru menggunakan perintah berikut.

    1. $ npx buat-reaksi-aplikasi reactapp

    Buka file App.js dan masukkan cuplikan kode berikut.

    App.js

    1. importReact, {Component} from ‘react’;
    2. import‘./App.css’
    3. importPortalDemo from ‘./PortalDemo.js’;
    4. classApp extends Component {
    5. render () {
    6. return (
    7. <div className=’App’>
    8. <PortalDemo />
    9. </div>
    10. );
    11. }
    12. }
    13. export defaultApp;

    Langkah selanjutnya adalah membuat komponen portal dan mengimpornya di file App.js.

    PortalDemo.js

    1. importReact from ‘react’
    2. importReactDOM from ‘react-dom’
    3. function PortalDemo(){
    4. returncreatePortal(
    5. <h1>Portals Demo</h1>,
    6. getElementById(‘portal-root’)
    7. )
    8. }
    9. export defaultPortalDemo

    Sekarang, buka file Index.html dan tambahkan elemen <div id = “portal-root”> </div> untuk mengakses komponen anak di luar node root.

    Index.html

    1. <!DOCTYPE html>
    2. <html lang=”en”>
    3. <head>
    4. <meta charset=”utf-8″ />
    5. <link rel=”shortcut icon” href=”%PUBLIC_URL%/favicon.ico” />
    6. <meta name=”viewport” content=”width=device-width, initial-scale=1″ />
    7. <meta name=”theme-color” content=”#000000″ />
    8. <link rel=”manifest” href=”%PUBLIC_URL%/manifest.json” />
    9. <title>React App</title>
    10. </head>
    11. <body>
    12. <noscript>It is required to enable JavaScript to run this</noscript>
    13. <div id=”root”></div>
    14. <div id=”portal-root”></div>
    15. </body>
    16. </html>

     

    Sekarang, buka Inspect (ctrl + shift + I). Di jendela ini, pilih bagian Elemen lalu klik komponen <div id = “portal-root”> </div>. Di sini, kita dapat melihat bahwa setiap tag berada di bawah simpul DOM “portal-root”, bukan simpul DOM “root”. Karenanya, kita dapat melihat bagaimana React Portal menyediakan kemampuan untuk keluar dari pohon DOM root.

     

     

     

    credit. javtpoint

    Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Tagged: 

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