React Academy · Pelajaran

Apakah React Portals?

Fahami API createPortal dan sebab paparan di luar div akar berguna.

Pelajaran 1 daripada 413 langkah

Apakah React Portals? ialah pelajaran React Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Academy merangkumi sejumlah 4 pelajaran.

Selamat Datang

Dalam pelajaran ini, anda akan mempelajari apa itu Portal React, mengapa pemaparan di luar pepohon DOM induk berguna, dan cara menggunakan API createPortal.

Hierarki DOM React Biasa

Secara lalai, setiap komponen dipaparkan di dalam nod DOM induknya. Keseluruhan aplikasi React biasanya berada di dalam satu `

`. Ini berfungsi dengan baik sehingga anda perlu membolehkan modal, petua alat atau menu lungsur keluar daripada induk yang mempunyai `overflow: hidden`.

Apakah Portal

**Portal** membolehkan anda memaparkan hasil komponen ke dalam nod DOM yang berbeza — nod yang wujud di luar akar React. Pepohon komponen React tidak berubah; hanya kedudukan DOM yang berubah.

import { createPortal } from 'react-dom';

function Modal({ children }) {
  return createPortal(
    children,
    document.body // render into body, not parent
  );
}

Mengapa Portal Wujud

Sifat CSS seperti `overflow: hidden`, konteks susunan `z-index` dan `transform` pada induk boleh memotong atau menyembunyikan elemen anak. Portal mengatasi kekangan ini dengan melampirkan hasil pemaparan pada nod DOM yang berbeza.

Penggelembungan Peristiwa Masih Berfungsi

Walaupun nod DOM portal berada di luar induk, **peristiwa React masih menggelembung** melalui pepohon komponen React — bukan pepohon DOM. Klik di dalam modal portal akan menggelembung kepada induk Reactnya.

Mencipta Sasaran Portal

Anda boleh membuat portal ke mana-mana nod DOM sedia ada. Corak biasa ialah menambah `

// index.html
<body>
  <div id="root"></div>
  <div id="modal-root"></div>
</body>

// Modal.jsx
createPortal(children, document.getElementById('modal-root'));

Kitar Hayat Portal Terikat pada Induk React

Portal dipasang apabila komponen induknya dipasang dan dinyahpasang apabila induknya dinyahpasang. React masih menjejakinya sebagai sebahagian daripada pepohon komponen yang sama, jadi konteks dan rujukan berfungsi seperti biasa.

Konteks Berfungsi Merentas Portal

Oleh sebab portal kekal sebagai sebahagian daripada pepohon komponen React, nilai konteks yang disediakan di atas portal masih boleh diakses di dalam portal. Kedudukan DOM tidak mempengaruhi rantaian konteks React.

Menggunakan createPortal dengan Keadaan

Kawal keterlihatan portal dengan pemboleh ubah keadaan. Togolnya menggunakan butang dan kandungan portal akan muncul dalam document.body, manakala butang kekal pada kedudukan DOM biasanya.

function App() {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setOpen(true)}>Open</button>
      {open && createPortal(
        <div className="overlay">
          <button onClick={() => setOpen(false)}>Close</button>
        </div>,
        document.body
      )}
    </div>
  );
}

Pemaparan Sisi Pelayan & Portal

Portal memerlukan nod DOM untuk wujud, jadi portal sentiasa berjalan pada sisi klien. Dalam Next.js atau persediaan SSR lain, pastikan kod pemaparan portal hanya dijalankan dalam pelayar menggunakan `useEffect` atau pemeriksaan keadaan selepas pemasangan.

Semakan Pantas

Portal React memaparkan kandungan ke dalam nod DOM yang berbeza. Apakah aspek pepohon komponen React yang terjejas oleh perkara ini?

Jawab dalam pelajaran interaktif

Imbas Kembali

Portal membolehkan anda memaparkan hasil React ke mana-mana nod DOM menggunakan createPortal(). Pepohon React, konteks dan penggelembungan peristiwa tidak terjejas. Gunakannya untuk mengatasi kekangan limpahan dan susunan z bagi modal dan petua alat.

Seterusnya

Pelajaran seterusnya: **Membina Komponen Modal dengan Portal** — anda akan membina modal yang boleh diguna semula sepenuhnya yang memaparkan portal ke dalam document.body dengan pengurusan keadaan buka/tutup.

Percuma untuk bermula

Pelajari React dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 88
Pelajaran: 324

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Apakah React Portals?” percuma?

Ya — teks penuh “Apakah React Portals?” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus React Academy, tingkat taraf kepada CoddyKit PRO. Kursus React Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Apakah React Portals?”?

Fahami API createPortal dan sebab paparan di luar div akar berguna. Anda berlatih React Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan React Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran React Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Apakah React Portals?” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Academy ini?

Ya. Setiap pelajaran React Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Apakah React Portals?
Membina Komponen Modal dengan Portal
Mengendalikan Fokus dan Perangkap Papan Kekunci dalam Modal
Petua Alat dan Menu Juntai dengan Portal

← Kembali ke React Academy