Komponen React mendorong praktik yang baik namun bisa jadi terlalu membatasi. Pelajari cara memecahkan cetakan.

Poin Penting

  • React Portals memungkinkan Anda merender konten komponen di luar hierarki komponen induknya, sehingga berguna untuk elemen UI seperti modals dan overlay.
  • Portal dapat digunakan dalam berbagai skenario seperti modals, integrasi pihak ketiga, menu konteks, dan tooltips, memungkinkan rendering yang fleksibel di lokasi DOM yang berbeda.
  • Dengan menggunakan React Portals, Anda dapat memisahkan masalah UI dari pohon komponen utama, meningkatkan pemeliharaan kode, dan dengan mudah mengontrol indeks-z komponen untuk melapisi dan menumpuk elemen UI.

Aplikasi web modern memerlukan antarmuka yang menampilkan elemen seperti modals dan tooltips. Namun komponen UI ini mungkin tidak selalu terintegrasi dengan baik dengan struktur komponen yang ada.

React menawarkan solusi untuk masalah ini melalui fitur yang disebut Portal.

Apa itu React Portal?

Portal React menyediakan cara untuk merender konten komponen di luar hierarki komponen induknya. Dengan kata lain, mereka memungkinkan Anda merender keluaran komponen ke dalam elemen DOM lain yang bukan merupakan turunan dari komponen saat ini.

instagram viewer

Fitur ini berguna ketika menangani komponen UI yang perlu dirender pada tingkat yang lebih tinggi di DOM, seperti modals atau overlay.

Kegunaan untuk Portal React

React Portals berguna dalam berbagai skenario:

  • Modal dan overlay. Saat Anda perlu menampilkan dialog modal atau overlay, render di tingkat atas DOM. Hal ini memastikan bahwa gaya atau tata letak induknya tidak membatasinya.
  • Integrasi pihak ketiga. Saat mengintegrasikan perpustakaan pihak ketiga yang mengantisipasi rendering di lokasi DOM tertentu.
  • Menu konteks. Membuat menu konteks yang merespons interaksi pengguna, yang perlu Anda posisikan relatif terhadap area pandang atau elemen DOM tertentu.
  • Tooltip dan popover. Saat merender tooltip atau popover yang harus muncul di atas komponen lain, terlepas dari posisinya di pohon komponen.

Cara Kerja Portal React

Secara tradisional, ketika Anda merender sebuah komponen di React, Anda melampirkan outputnya ke node DOM komponen induk. Ini berfungsi dengan baik untuk sebagian besar skenario, namun menjadi terbatas ketika Anda perlu merender konten di luar hierarki induk.

Misalkan Anda membuat dialog modal. Secara default, Anda akan menempatkan konten modal di dalam node DOM komponen induk.

Hal ini dapat menyebabkan konflik gaya, dan perilaku tidak diinginkan lainnya karena konten modal mewarisi gaya dan batasan komponen induknya.

Portal React mengatasi keterbatasan ini dengan membiarkan Anda menentukan elemen DOM target di mana keluaran komponen harus dirender.

Ini berarti Anda dapat merender elemen UI apa pun di luar hierarki DOM induknya, sehingga terbebas dari batasan gaya dan tata letak induknya.

Cara Menggunakan Portal React

Modals adalah contoh sempurna kapan Anda bisa menggunakan React Portals. Kode contoh ini menjelaskan prosedurnya.

Siapkan Aplikasi React Dasar

Sebelum membuat portal, pastikan Anda telah menyiapkan aplikasi React dasar. Anda dapat gunakan alat seperti Buat Aplikasi React untuk segera merancang proyek.

Buat Portal untuk Modal

Untuk membuat portal, gunakan ReactDOM.createPortal() fungsi. Dibutuhkan dua argumen: konten yang ingin Anda render, dan referensi ke node DOM untuk merendernya.

Dalam contoh ini, komponen Modal merender turunannya menggunakan portal. Konten akan muncul di elemen DOM dengan ID 'root'.

// Modal.js
import ReactDOM from"react-dom";
const Modal = ({ children }) => {
const modalRoot = document.getElementById("root");
return ReactDOM.createPortal(children, modalRoot);
};
exportdefault Modal;

Anda dapat menentukan konten Modal tertentu dalam komponen tertentu. Misalnya, komponen ModalContent ini berisi paragraf dan a Menutup tombol:

// Create a Modal Content Component
const ModalContent = ({ onClose }) => (
"modal">
"modal-content">
This is a modal content.</p>




exportdefault ModalContent;

Anda kemudian dapat membuka Modal melalui klik tombol yang ditentukan di App.js:

// Usage in App component
import { useState } from"react";
import Modal from"./Modal";
import ModalContent from"./ModalContent";
import"./App.css";
const App = () => {
const [isModalOpen, setIsModalOpen] = useState(false);


const toggleModal = () => {
 setIsModalOpen(!isModalOpen);
 };


return (






exportdefault App;

Dalam contoh ini, komponen Modal merender kontennya menggunakan portal, terlepas dari hierarki komponen utama.

Contoh Dunia Nyata

Portal React berguna dalam berbagai situasi sehari-hari.

  • Sistem notifikasi: Kapan membuat sistem notifikasi, Anda sering kali menginginkan pesan berada di bagian atas layar, di mana pun komponen saat ini berada.
  • Menu konteks: Menu konteks akan muncul di dekat tempat yang diklik pengguna, di mana pun lokasinya dalam hierarki DOM.
  • Integrasi pihak ketiga: Pustaka pihak ketiga sering kali perlu menargetkan bagian DOM yang berubah-ubah.

Praktik Terbaik untuk Penggunaan Portal

Untuk mendapatkan hasil maksimal dari React Portals, ikuti tips berikut:

  • Pilih kasus yang tepat: Portal bersifat fleksibel, namun tidak semuanya memerlukannya. Gunakan portal ketika rendering reguler menyebabkan masalah atau bentrokan.
  • Pisahkan konten portal: Saat Anda merender konten melalui portal, pastikan konten tersebut mandiri. Ini tidak boleh bergantung pada gaya atau konteks induk.
  • Kelola acara dan tindakan: Dengan portal, acara bekerja sedikit berbeda karena kontennya terpisah. Tangani propagasi dan tindakan acara dengan benar.

Manfaat Portal React

React Portals menawarkan beberapa manfaat yang dapat meningkatkan pengembangan antarmuka pengguna yang kompleks. Mereka:

  • Membantu memisahkan masalah UI dari pohon komponen utama, sehingga meningkatkan pemeliharaan dan keterbacaan kode.
  • Memberikan fleksibilitas untuk komponen yang perlu ditampilkan di luar komponen induknya.
  • Permudah pembuatan modal dan overlay yang terpisah dari UI lainnya.
  • Memungkinkan Anda mengontrol indeks-z komponen dengan mudah, memastikan Anda dapat melapisi dan menumpuk elemen UI dengan rapi.

Potensi Kesalahan dan Pertimbangan

Meskipun React Portals sangat membantu, ingatlah hal-hal berikut:

  • Masalah CSS: Portal dapat menyebabkan perilaku gaya CSS yang tidak terduga karena portal menempatkan konten di luar komponen induk. Gunakan gaya global atau kelola cakupan CSS dengan hati-hati.
  • Aksesibilitas: Saat Anda menggunakan portal untuk merender konten, ingatlah untuk menjaga fitur aksesibilitas seperti navigasi keyboard dan kompatibilitas pembaca layar tetap utuh.
  • Render sisi server: Portal mungkin tidak cocok rendering sisi server (SSR). Memahami efek dan batasan penggunaan portal dalam pengaturan RSK.

Mendorong UI Melampaui Norma

React Portals menawarkan solusi kuat untuk menangani situasi UI rumit yang memerlukan konten untuk tampil melampaui batas komponen induk.

Dengan memahami portal dan menggunakan praktik terbaik, Anda dapat membangun antarmuka pengguna yang lebih mudah beradaptasi dan mudah dikelola, sekaligus menghindari masalah.

Baik Anda membuat modals atau menghadirkan perpustakaan pihak ketiga, React Portals memberikan jawaban yang kuat untuk memenuhi kebutuhan UI yang menuntut.