Kā renderēt modālus

Modeļi var būt sarežģīta tēma pakalpojumā React, jo veids, kā React strukturē DOM. Ja esat iepazinies ar React pamatiem, jūs zināt, ka visa lietotne ir sastāvdaļa, ko parasti sauc, kas tiek pievienota kā bērns ar nosaukumu #root. Index.html fails izskatās šādi:

Kad komponents tiek atveidots DOM, faktiskais elements ar id “#root” tajā atveido visu React App.

Līdz ar to ir diezgan izplatīti gadījumi, kad React lietotņu komponenti ir ļoti dziļi ligzdoti. Mēs runājam desmitiem līmeņu dziļi, un bieži vien vairāk. Tātad, ja kādam no šiem dziļi ligzdotajiem komponentiem ir jāparāda modāls, tas saskarsies ar nopietnām CSS problēmām.

Modāli uz ekrāna ievieto pārklājumu, un tāpēc tiem ir augstāka vizuālā prioritāte pār visiem citiem elementiem. Ja jums tas būtu jāliek z-indeksa izteiksmē, tam jābūt visaugstākajam no visiem ekrānā redzamajiem elementiem. Bet, tā kā tas ir tik dziļi ligzdots, vecāku elementi, kas virzās uz koku, iegūst CSS prioritāti.

Tā vietā, lai pieskartos CSS, kas var būt precīzi noregulēts, un tāpēc, ka tur ķengāties, varētu tikt izjaukta lietotne, mums jāatrod veids, kā padarīt to DOM, bet ārpus dziļās ligzdošanas .

Risinājums - React Portals

Viena no stratēģijām ir izmantot ReactDOM portālus un ievietot modu div, kas ir brāļa vai māsas sastāvdaļa div ar id “#root”. Tādējādi CSS stili, kas tiek piemēroti modāla div iesaiņotājam, tiks piemēroti tikai attiecībā uz tā brāli (“#root” div), un tas neizjauks CSS stilu “# root”.

Lai to izdarītu, mums jāizmanto createPortal()ReactDOM metode. Portāls faktiski ir tāds brāļa vai māsas divnieks, kas izliek noteikumu, ka visiem React komponentiem jābūt pēcnācējiem . Lai to izdarītu, mums jādara šādi:

  1. Vietnē index.html taga iekšpusē : y>
  You need to enable JavaScript to run this app. . //ADD THIS  

2. Izveidojiet modal.js komponentu (classNames ir no semantic-UI ):

import React from "react"; import ReactDOM from "react-dom"; const JSX_MODAL = ( THIS IS SOME TEXT IN THE MODAL // add some UI features here ); function Modal(props) { return ReactDOM.createPortal(JSX_MODAL, document.querySelector("#modal")); } export default Modal;

Jūs redzēsiet, ka tam ir createPortalvajadzīgi divi argumenti: daži JSX, kas tiek atveidoti, un līdzīgi ReactDOM.renderkā mērķa elements, zem kura JSX tiek atveidots.

Ja jūs atveidojat komponentu un dodaties uz to, jums jāatrod, ka tas parādās diezgan labi. Tagad jums jāpievieno atbilstošs onClick() apdarinātājs, lai apstrādātu klikšķu notikumus iekšējā modālā lietotāja saskarnē, kā arī virzītos prom no modāla, ja lietotājs noklikšķina ārpus iekšējā modālā lietotāja interfeisa.

To vēlaties izdarīt, klausoties klikšķus pareizajā apgabalā un pēc tam pārtraucot izplatīšanos, lai pareizā rīcība rastos atkarībā no reģiona, uz kura noklikšķina lietotājs.

Atkārtota izmantošana

Iepriekš minētais piemērs ir ļoti vienkāršs, un tas nav paredzēts kā gatavs lietošanai koda fragments. Drīzāk tas ir risinājums modālu problēmu novēršanai. Jums vajadzētu absolūti pielāgot komponentu atbilstoši savām vajadzībām. Izmantojiet React atkārtotas izmantošanas principus, lai pārliecinātos, ka modālā neesat smagi kodējis datus, un pēc vajadzības nododiet saturu un vēl mazākus logrīkus.

Piemēram, vienā no maniem projektiem es uzskatu modālu, kad lietotājs gatavojas kaut ko izdzēst no datu bāzes. Tāpēc mans komponents, teiksim, tiek saukts . Tas padara , kas ir pārklājums, kas aptumšo pamatā esošo ekrānu.

render() { return ( ); } renderActionButtons = () => { //return JSX that renders action buttons... return ( Delete Cancel ); };

Iekšpusē /> is an inner component c alled rModal /> and this has the actual interactive component, with headers, content and text.

So my /> component creates props to pass down into <;Modal /> which in turn gets drille d down into <;InnerModal />, and so the render method in looks like:

…with the actual Modal Component looking like:

import React from "react"; import ReactDOM from "react-dom"; import ModalInner from './modal-inner' function Modal(props) { return ReactDOM .createPortal( , document.querySelector("#modal") //target DOM element ); } export default Modal;

and now, you’re finally able to render:

Voilà, there you have it! Modals, with React Portal! Hope you enjoyed this ?

And hope it saved you some ? ? ?…

If you would like to talk about your journey, I would love to listen. Tweet me @ZubinPratap. If you think what you just read could be useful to someone, please share it.

[Update] Quincy at FreeCodeCamp has relaunched the FreeCodeCamp podcast, and uses his incredible experience as an educator to pull together content that will help you on your journey. I was recently on episode 53 and if you’re new to development, you should check it out to see how many people are like us, and how much is possible for us! You can also access the podcast on iTunes, Stitcher, and Spotify or directly from this page.

Follow my Medium blog , my Github page and, if you’re so inclined, hit me up on LinkedIn.

Founder at Whooshka.me