ReactJS - Portal: Portal ke Dunia Baru dalam Aplikasi React Anda

Hai, para pengembang React yang bersemangat! Hari ini, kita akan mengemban perjalanan menarik ke dunia React Portals. Bayangkan Anda sedang membangun sebuah rumah (aplikasi React Anda), dan tiba-tiba Anda menyadari Anda memerlukan sebuah lorong rahasia untuk mentransportasi 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 pertama kelas untuk merender anak-anak ke node DOM yang berada di luar hierarki DOM induk komponen. Dalam kata yang sederhana, itu seperti membuat lubang angin yang memungkinkan Anda merender sebuah komponen di tempat lain dalam pohon DOM, meskipun itu masih bagian dari hierarki komponen React Anda.

Mengapa Kita Butuh Portals?

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

1. Dialog modal
2. Tooltip
3. Menu mengambang
4. Widget yang perlu keluar dari wadahnya

Ayo masuk lebih mendalam bagaimana Portals bekerja dan bagaimana menggunakannya.

Membuat Portal Pertama Anda

Untuk membuat Portal, kita menggunakan metode ReactDOM.createPortal(). Berikut 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.

Ayouraong ReactDOM.createPortal() metode:

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

Contoh Dunia Nyata: Dialog Modal

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)}>
<h2>Ini 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.

Ayouraong 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 di mana saja dalam pohon DOM, event masih memancar 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>Klik: {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 handler klik di komponen Parent, menambahkan hitungan klik. Perilaku ini sangat berguna karena menjaga propagasi event seperti yang diharapkan, meskipun komponen sebenarnya dirender di tempat lain dalam DOM.

Praktek dan Pertimbangan Terbaik

Saat menggunakan Portals, ingatkan diri Anda tentang hal-hal berikut:

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

Metode Portal

Berikut adalah tabel metode kunci terkait dengan 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 dimuat dari DOM dan membersihkan handler event dan state-nya.

Kesimpulan

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

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

Selamat coding, dan semoga Portals Anda selalu memuncak ke dimensi menarik dalam aplikasi React Anda!

Credits: Image by storyset