Modal Induk, Petua Alat dan banyak lagi dengan React createPortal

mencipta modal dan petua alat dalam React selalunya sukar untuk digayakan dan membawa kepada banyak ralat penggayaan.
createPortal api memudahkan proses ini membenarkan untuk membuat komponen di luar DOM utama, yang menghasilkan kemudahan penggayaan dan kebolehselenggaraan. Dalam siaran ini kita akan belajar cara menggunakan alat ini untuk mencipta modal dan petua alat dengan cara yang betul dalam React.

Memahami createPortal api

createPortal ialah fungsi terbina dalam React yang membolehkan anda memaparkan komponen di bahagian DOM yang berlainan. Dan ia amat berguna untuk membina: Modal dan Tindanan, Komponen pihak ketiga dan elemen UI tersuai.

Bagaimana ia berfungsi

Portal digunakan di dalam penyataan pemulangan komponen dan ia hanya mengubah penempatan fizikal nod DOM. ia seperti teleportasi nod DOM di luar pokok DOM utama. API createPortal mengakses dua parameter dan ketiga pilihan:

• Kanak-kanak: apa-apa sahaja yang boleh dipaparkan dengan React, div, komponen atau serpihan React.
• domNode: iaitu lokasi kanak-kanak yang akan ditempatkan.
• kunci(pilihan): nombor atau rentetan unik untuk digunakan sebagai kunci portal.

Jika kita mengandaikan bahawa kita mencipta portal dalam komponen A dan menjadikannya dalam komponen B, anak-anak portal akan mengakses semua keadaan dan pembolehubah komponen A dan fungsi seperti yang terdapat dalam komponen A sementara ia telah dipaparkan dalam komponen B.

Mencipta dan menggunakan portal

Dalam contoh di bawah portal digunakan untuk teleport komponen Anak yang menerima keadaan dan memindahkan komponen ini ke badan.

import { createPortal } from 'react-dom' const App = () => { const [state, setState] = useState() return( 
 
 ... 
 createPoratl( , document.body ) 
 ) } export default App

Kini komponen anak akan dipaparkan dalam teg badan dalam HTML.

Kesimpulan

createPortal ialah alat berharga dalam React untuk mencipta modal, petua alat dan komponen lain yang perlu dipaparkan di luar pepohon DOM utama. dengan menggunakan alat ini, anda boleh mencapai pendekatan yang lebih bersih, fleksibel dan lebih cekap bagi elemen ini.

Atas ialah kandungan terperinci Modal Induk, Petua Alat dan banyak lagi dengan React createPortal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!