ReactJS - Portals: Gerbang ke Dimensi Baru dalam Aplikasi React Anda

Halo, para pengembang React yang bersemangat! Hari ini, kita akan melakukan perjalanan menarik ke dunia React Portals. Bayangkan Anda sedang membangun sebuah rumah (aplikasi React Anda), dan tiba-tiba Anda menyadari Anda butuh sebuah lorong rahasia untuk mengirimkan sesuatu dari satu kamar ke kamar lain tanpa melalui koridor utama. Itu sebenarnya apa yang dilakukan React Portals bagi komponen Anda!

Apa Itu React Portals?

React Portals menyediakan cara kelas pertama untuk merender anak-anak ke node DOM yang berada di luar hierarki DOM induk komponen. Dalam kata yang sederhana, itu seperti membuat lubang hitam yang memungkinkan Anda merender komponen di tempat lain di pohon DOM, meskipun itu masih bagian dari hierarki komponen React Anda.

Mengapa Kita Butuh Portals?

Anda mungkin berpikir, " Mengapa saya tidak bisa merender komponen saya dimana saja?" Well, dalam kebanyakan kasus, Anda bisa! Tetapi ada situasi di mana Portals sangat berguna:

1. Dialog modal
2. Tooltips
3. Menu yang melayang
4. Widget yang perlu keluar dari wadahnya

Ayo masuk lebih dalam bagaimana Portals bekerja dan bagaimana menggunakannya.

Membuat Portal Pertama Anda

Untuk membuat Portal, kita gunakan metode ReactDOM.createPortal(). Ini adalah contoh dasar:

import React from 'react';
import ReactDOM from 'react-dom';

function MyPortalComponent() {
return ReactDOM.createPortal(
<h1>Saya dirender di tempat lain!</h1>,
document.getElementById('portal-root')
);
}

Dalam contoh ini, kita membuat Portal yang merender elemen <h1> ke node DOM dengan id 'portal-root'. Node ini harus ada di mana saja di HTML Anda, di luar elemen root utama aplikasi React Anda.

Ayoongkan ReactDOM.createPortal() metode:

1. Argumen pertama adalah elemen React yang Anda ingin render.
2. Argumen kedua adalah elemen DOM tempat Anda ingin merender itu.

Contoh Dunia Nyata: Modal Dialog

Ayo buat contoh yang lebih praktis - dialog modal yang muncul di atas konten aplikasi Anda.

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Modal({ isOpen, onClose, children }) {
if (!isOpen) return null;

return ReactDOM.createPortal(
<div className="modal-overlay">
<div className="modal-content">
{children}
<button onClick={onClose}>Tutup</button>
</div>
</div>,
document.getElementById('modal-root')
);
}

function App() {
const [isModalOpen, setIsModalOpen] = useState(false);

return (
<div>
<h1>Selamat Datang di Aplikasi Saya</h1>
<button onClick={() => setIsModalOpen(true)}>Buka Modal</button>
<Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
<h2Ini adalah Modal</h2>
<p>Ini dirender di luar pohon React utama!</p>
</Modal>
</div>
);
}

Dalam contoh ini, kita membuat komponen Modal yang menggunakan Portal untuk merender kontennya. Komponen App mengontrol visibilitas modal menggunakan hook useState React.

Ayoongkan apa yang terjadi:

1. Komponen Modal memeriksa apakah itu harus terbuka (isOpen prop).
2. Jika terbuka, ia membuat Portal yang merender kontennya ke elemen 'modal-root'.
3. Konten modal termasuk tombol tutup yang memicu prop onClose.
4. Dalam komponen App, kita menggunakan state untuk mengontrol visibilitas modal.

Propagasi Event melalui Portals

Salah satu aspek yang menarik dari Portals adalah meskipun mereka dapat merender konten dimana saja di pohon DOM, event masih membubung melalui pohon React seperti yang diharapkan. Ayo lihat contoh:

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Parent() {
const [clicks, setClicks] = useState(0);

const handleClick = () => {
setClicks(clicks + 1);
};

return (
<div onClick={handleClick}>
<h1>Clicks: {clicks}</h1>
<Portal>
<Child />
</Portal>
</div>
);
}

function Portal({ children }) {
return ReactDOM.createPortal(
children,
document.getElementById('portal-root')
);
}

function Child() {
return <button>Click saya!</button>;
}

Dalam contoh ini, mengklik tombol di dalam Portal masih akan memicu penghandle click di komponen Parent, menambah jumlah klik. Perilaku ini sangat berguna karena menjaga propagasi event seperti yang diharapkan, meskipun komponen sebenarnya dirender di tempat lain di DOM.

Praktik Terbaik dan Pertimbangan

Saat menggunakan Portals, ingatlah hal berikut:

1. Aksesibilitas: Pastikan konten Portal Anda aksesibel, khususnya bagi pembaca layar.
2. Penanganan Event: Ingat bahwa event membubung melalui pohon React, bukan pohon DOM.
3. Styling: Konten Portal mungkin memerlukan pertimbangan styling terpisah.
4. Pembersihan: Jangan lupa untuk membersihkan Portals Anda saat komponen dihapus.

Metode Portal

Berikut adalah tabel metode kunci terkait React Portals:

Metode	Deskripsi
ReactDOM.createPortal(child, container)	Membuat sebuah portal. child adalah anak renderable React, dan container adalah elemen DOM.
ReactDOM.unmountComponentAtNode(container)	Menghapus komponen React yang dimount dari DOM dan membersihkan penghandle event dan state nya.

Kesimpulan

React Portals adalah fitur yang kuat yang memungkinkan Anda keluar dari hierarki komponen tradisional saat merender. Mereka sangat berguna untuk membuat modals, tooltips, dan elemen UI lainnya yang perlu secara visual "keluar" dari wadah mereka.

Ingat, dengan kekuatan yang besar datang tanggung jawab yang besar! Gunakan Portals bijaksana, dan selalu pertimbangkan dampaknya pada struktur dan aksesibilitas aplikasi Anda.

Selamat coding, dan semoga Portals Anda selalu membawa ke dimensi baru dalam aplikasi React Anda!

Credits: Image by storyset