Best Practice zum Erstellen des modalen Fensters übernehmen

Question

Wie erstellt man ein modales Fenster mit React? Unter modalem Fenster verstehe ich einen Rahmen, der den Inhalt einer Seite überlagert. Ich möchte, dass es mit einem Knopf auf der Webseite geöffnet wird, kann es schließen, indem ich außerhalb des Bereiches klicke und es wird ein Formular enthalten, welches der Benutzer ausfüllen und senden wird.

Hat React einige Produktion bereit Bibliothek für diese Aufgabe, oder sollte ich es mit CSS implementieren? Auch im Falle eines Containers/Repräsentations-Komponentenmusters, sollte ich die modale Komponente innerhalb der Container-Komponente der modalen Öffnungskomponente oder innerhalb der modalen Öffnungskomponente selbst verschachteln?

Answer 1

React Modal ist eine großartige Bibliothek dafür.

Answer 2

1 - Wenn Sie eine generische modale Komponente in React schreiben möchten, ist das einzige, was Ihre modale Komponente tun sollte, eine konsistente Ansicht zu geben, wie zB eine Überlagerung, Positionierungswerte und alle üblichen Verhaltensweisen usw. Die Interaktionsentscheidungen hängen davon ab, wie Sie mit der Anwendung fortfahren. Zum Beispiel, in dieser Art von Ansatz, den ich als (1) erwähne, passt besser zur Verwendung von Flux. Im Grunde genommen haben Sie einen Speicher und sammeln alle Komponentenstatusdaten darin, und die ui-Zustände werden von Requisiten verwaltet, die an Ihre Komponente übergeben werden, anstatt setState aufzurufen, um den Status Ihrer Komponente zu ändern. Darüber hinaus haben Sie die Möglichkeit, den Status der Komponente außerhalb der Komponente zu ändern. Lassen Sie mich mit einem Beispiel klar:

import "./modal.scss"; 

class Modal extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    shouldComponentUpdate(nextProps) { 
    return !I.is(this.props.data, nextProps.data); 
    } 

    render() { 
    let isOpen = this.props.data.get("isOpen"); 
    return (
     <div className={`flex middle center modal ${isOpen ? "open" : ""}`}> 
     {isOpen ? 
     (<div className={`row modal-content ${this.props.size || ""}`}> 
      <div className="col-12 middle modal-title">{this.props.title}</div> 
      <div className="col-12 modal-body"> 
      {this.props.body} 
      </div> 
      <div className="col-12 middle modal-footer">{this.props.footer}</div> 
     </div>) : null 
     } 
     </div>); 
    } 
} 

export default Modal; 

Und eine Style-Datei wie:

.modal { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 10000; 
    padding: 2rem; 
    background-color: rgba(0, 0, 0, 0.55); 

    .modal-content { 
    background-color: white; 
    max-height: 80%; 
    height: 80%; 

    .modal-title { 
     padding: 0 2.25rem; 
     height: 5rem; 
     max-height: 5rem; 
     text-transform: uppercase; 
     font-size: 1.8rem; 
    } 

    .modal-body { 
     height: calc(100% - 16rem); 
     overflow-y: scroll; 
     padding: 0 2rem; 
    } 

    .modal-footer { 
     height: 5rem; 
     max-height: 5rem; 
     padding: 0 2.25rem; 
    } 
    } 
} 

Und Sie können es als verwenden:

<Modal isOpen={/* depends on your parameter */} 
     title="Hello Title" 
     body="Hello Body" 
     footer="Hello Footer" 
/> 

Diese modalen Design gibt nur die richtige Sicht und grundlegende Steuerelemente eines Modals, und die Konfiguration ist all Ihren Verwendungen überlassen. Wenn Ihre Anwendungslogik in anderen Modalitäten sehr ähnlich ist, können Sie sie selbst in die modale Komponente einfügen.