Modalitățile pot fi un subiect dificil în React datorită modului în care React structurează DOM. Dacă sunteți familiarizat cu elementele de bază ale React, veți ști că întreaga aplicație este o componentă, de obicei numită <App/> care se adaugă în copilărie <div> numit # rădăcină. Fișierul index.html arată astfel:

Cum se reda modurile in React
fișierul public / index.html de la create-react-app

Odata ce <App/> Componenta este redată la DOM, cea reală <div> elementul cu ID „#root” obține întreaga aplicație React redată în interiorul său.

În consecință, este destul de obișnuit ca React App Components să fie cuibărite foarte adânc. Vorbim de zeci de niveluri adânci și adesea mai multe. Deci, dacă una dintre aceste componente adânc imbricate trebuie să prezinte un mod, se va confrunta cu probleme CSS serioase.

Modalele pun o suprapunere pe ecran și, prin urmare, au o prioritate vizuală mai mare toate alte elemente. Dacă ar fi trebuit să-l puneți în termeni de index z, ar trebui să fie cel mai mare număr dintre toate elementele de pe ecran. Dar, din moment ce este atât de adânc cuibărit, elementele părinte care urcă în copac au prioritate CSS.

Mai degrabă decât să atingem CSS, care poate fi reglat fin, și așa că lăuda acolo ar putea sparge aplicația, trebuie să găsim o modalitate de a reda la DOM – dar în afara cuibăritului profund.

Soluție – Reactează portalurile

O strategie este de a utiliza portalurile ReactDOM și de a pune modalitatea într-un div care este o componentă frate pentru div cu ID-ul „#root”. Procedând astfel, stilurile CSS aplicate div wrapper-ului modal se vor aplica numai în raport cu fratele său (divul „#root”) și asta nu va rupe stilul CSS al „#root”.

Pentru a face acest lucru, trebuie să folosim createPortal() metoda ReactDOM. Un portal este efectiv un astfel de div frate, care înclină regula că toate Componentele React trebuie să fie descendenți ai <div id=”root">. Pentru a face acest lucru, trebuie să facem următoarele:

  1. În index.html, în interiorul <body> etichetă:
<body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    
    <div id="root"></div>
    
    <div id="modal"></div> .   //ADD THIS
    
  </body>
</html>

2. Creați o componentă Modal.js (classNames provin din semantic-UI):

import React from "react";
import ReactDOM from "react-dom";

const JSX_MODAL = (
  <div className="ui dimmer modals visible active">  
    <div className="ui standard modal visible active">
      THIS IS SOME TEXT IN THE MODAL // add some UI features here
    </div>
  </div>
);


function Modal(props) {
  return ReactDOM.createPortal(JSX_MODAL, document.querySelector("#modal"));
}


export default Modal;

Vei vedea asta createPortal ia două argumente: unele JSX care sunt redate și similare cu ReactDOM.render, elementul țintă sub care este redat JSX.

Dacă redați componenta și navigați la ea, ar trebui să găsiți că apare destul de bine. Acum trebuie să adăugați corespunzător onClick() handler pentru a gestiona evenimentele de clic din interiorul interfeței modale interioare, precum și pentru a naviga departe de modalitate dacă utilizatorul face clic în afara interfeței interioare modale.

Ați dori să faceți acest lucru ascultând clicurile în zona corectă și apoi oprind propagarea, astfel încât să apară comportamentele corecte în funcție de regiunea în care utilizatorul face clic.

Reutilizarea

Exemplul de mai sus este extrem de simplu și nu este destinat să fie un fragment de cod gata de utilizare. Mai degrabă, aceasta este o soluție pentru abordarea modalităților. Ar trebui să personalizați absolut componenta în funcție de nevoile dvs. Folosiți principiile React de reutilizare pentru a vă asigura că nu codificați datele în Modal și transmiteți conținutul și widget-urile mai mici, după cum este necesar.

De exemplu, într-unul dintre proiectele mele, prezint un mod când utilizatorul va șterge ceva din baza de date. Deci, componenta mea este, să zicem, numită <DeleteThis />. Redă <Modal />, care este suprapunerea care estompează subiacentul <DeleteThis /> ecran.

render() {
    return (
      <div>
        <Modal
          content={this.renderContentProp()}   
          header="Delete this?"                
          actions={this.renderActionButtons()}
          onDismiss={this.onDismiss}
        />
      </div>
    );
  }
  
  renderActionButtons = () => {
    //return JSX that renders action buttons...
    return (
      <div>
        <div className="ui button primary">Delete</div>
        <div className="ui button">Cancel</div>
      </div>
    );
  };

În <Modal /> este o componentă interioară called <InnerModal /> și acesta are componenta interactivă reală, cu anteturi, conținut și text.

Deci a mea <DeleteThis /> componenta creează recuzită pentru a transmite into <; Modal /> care la rândul său devine drilld down into <; InnerModal />, și așa render method în arată ca:

… cu componenta modală actuală care arată ca:

import React from "react";
import ReactDOM from "react-dom";
import ModalInner from './modal-inner'

function Modal(props) {
  return ReactDOM
    .createPortal(
       <ModalInner {...props} />,
       document.querySelector("#modal")                      //target DOM element
     );
}
export default Modal;

și acum, în cele din urmă puteți reda:

1611928445 567 Cum se reda modurile in React

Voilà, iată-l! Modale, cu React Portal! Sper că ți-a plăcut asta?

Și sper că te-a salvat? ? ? …

Dacă ai vrea să vorbești despre călătoria ta, mi-ar plăcea să ascult. Trimite-mi un tweet @ZubinPratap. Dacă credeți că ceea ce tocmai ați citit ar putea fi util cuiva, vă rugăm să îl împărtășiți.

[Update] Quincy la FreeCodeCamp a relansat Podcast FreeCodeCampși își folosește experiența incredibilă de educator pentru a strânge conținut care vă va ajuta în călătoria dvs. Am fost recent episodul 53 iar dacă sunteți nou în dezvoltare, ar trebui să o verificați pentru a vedea câți oameni sunt ca noi și cât de mult este posibil pentru noi! De asemenea, puteți accesa podcastul pe iTunes, Stitcher, și Spotify sau direct din această pagină.

Urmează-Mi Blog mediu , Ale mele Pagina Github și, dacă ești atât de înclinat, lovește-mă LinkedIn.

Fondator la Whooshka.me