Tạo Modal với React Portal

  • admin
  • 7 Tháng Bảy, 2023

Say hi những ngừi ae của toiiiii. Bài viết này là khai bút con Mạc Bục đã mua cách đây 2 tuần của toiiii kaka. Máy chạy nhanh quá làm mình cũng quên luôn viết bài trên blog của mình hehe.

À blog được tài trợ bởi server của ngừi anh thân thương Thành Trung. Ai mua VPS hay hosting thì có thể ghé Dnclound.vn bao rẻ-khoẻ luôn nha ahihi. Thôi văn vở quá rồi kéo xuống thoiiiii 😂

Api này rất là hữu ích trong việc ae tạo modal, popup đó là Create Portal. Giúp mình tạo ra những component nằm trong bất kỳ vị trí nào trên page của chúng ta. Vậy tại vì sao nên sử dụng nó hè

🤙 React app của chúng ta được render trong element có id root chẳng hạn, thì ở đây sẽ render cả cái app chúng ra luôn. Trong 1 số trường hợp chúng ta muốn sử dụng Modal của mình nằm ngoài component nào đấy hoặc nằm ngoài id root luôn thì chúng ta sử dụng react portal nhé

🤙 Giả sử mình có 1 sidebar bên trái, content bên phải và trong content có 1 modal confirm nhé
Trường hợp xảy ra là z-index của sidebar: 20, z-index của content:10
Bây giờ cho dù z-index của modal confirm của mình tăng lên bao nhiêu đi nữa thì cũng không có tác dụng đâu vì thằng cha của nó là content nhỏ hơn moà. Trong những trường hợp này mình có thể đưa thằng modal ra ngoài cùng cấp với sidebar hoặc tốt hơn ra ngoài root luôn

Cách dụng thì ae sẽ import createPortal vào nhé, có 2 tham số đầu tiên là jxs, tham số thứ 2 là element chúng ta muốn chèn vào. Ví dụ muốn chèn vào body thì đơn giản chỉ cần document.body là okie rồi nè. Trong trường hợp ae muốn chèn vào element nào thì get element nó ra và dùng thoi

Nợ demo nha ae 🤪. Có thì thắc mắc thì cứ ping mình giải thích nhé hihi. Chúc ae new day zui zẻ nhé 🤪

guest
3 Góp ý
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
Frankie Bridge
11 tháng trước

I really like your writing style..Its so easily understandable. You can visit my blog at https://similar.my.id and then maybe you can share your thought about mine.

GDIZ
9 tháng trước

Hi! Sorry i just curious, what template did you use for your website? I want to use it on my website at https://www.gdiz.eu.org

Nhấn ESC để đóng

3
0
Rất thích suy nghĩ của bạn, hãy bình luận.x