Global zugängliche modale Komponente in reagieren

Question

Ich habe Mühe, eine nette Möglichkeit zu finden, Modale zu implementieren, die von überall in meiner App zugänglich sind.

Ich möchte vermeiden, einen lokalen Zustand mit isOpen in jeder Komponente zu haben, die ein modales hat, da nur ein Modal auf einmal sichtbar sein sollte. Ich möchte auch vermeiden, Requisiten an alle Komponenten senden zu müssen, da nicht sicher ist, aus welchen Komponenten das Modal in Zukunft aktiviert werden kann.

Ich versuchte es mit Redux zu lösen, eine Basis modale Komponente App Komponente in meiner Top-Ebene umgesetzt habe, dann isOpen und component in Redux in einem modalen substate speichern, aber diese eine Menge Probleme eingeführt, da diese Komponente sein muss wird jedes Mal aktualisiert, wenn ein Benutzer mit dem Modal interagiert.

Ich machte auch einen Versuch mit React 16 Portalen, aber es schien nicht meine Bedürfnisse zu erfüllen. Hilfe geschätzt. Irgendwelche Ideen oder Best Practices hier?

Answer 1

Schauen Sie sich die Implementierung von Modals in react-semantic-ui an, modal ist eine selbstverwaltete Komponente, die durch das Portal in der Körperwurzel instanziiert wird. Wenn Sie überall in Ihrer App darauf zugreifen möchten, machen Sie einen Hinweis darauf und übergeben Sie es an Ihren Component Three.

Answer 2

Was Sie bereits verwenden, ist der zentralisierte Status, den Sie mit Redux implementiert haben.

Vielleicht wird die Umsetzung mit React Baobab klarer, so dass nur Komponenten neu gerendert werden, die rerender sollten.

Hinweis: Aus Gründen der Demonstration arbeite ich nur mit einer Eigenschaft "isOpened", die nicht mit vielen Komponenten arbeitet, die das Modal verwenden. Wenn dies der Fall ist, müssen Sie Ihrem Zustand etwas anderes hinzufügen, zum Beispiel eine ID des Modales, das Sie öffnen möchten, und prüfen, ob diese ID gesetzt ist (in SomeComponent).

Der Modal:

import React from "react"; 

export default class Modal extends React.Component { 
    render() { 
     return (
      <div className="myModal"></div> 
     ); 
    } 
} 

SomeComponent:

import React from "react"; 
import { branch as BaobabBranch } from "baobab-react/higher-order"; 
import PropTypes from "prop-types"; 
import { openModal } from "./actions/Modal"; 

@BaobabBranch({ 
    modal: ["modal"] 
}) 
export default class SomeComponent extends React.Component { 
    static propTypes = { 
     dispatch: PropTypes.func.isRequired, 
     modal: PropTypes.object.isRequired 
    } 

    onOpenModal() { 
     this.props.dispatch(openModal); 
    } 

    render() { 
     return (
      <div className="someComponent"> 
      { this.props.modal.isOpened ? 
       <Modal /> 
        : 
       <div class="content" onClick={::this.onOpenModal}></div> 
      } 
      </div> 
     ); 
    } 
} 

Aktionen/Modal:

export const openModal = state => { 
    state.select("modal").set(Object.assign({}, state.get("modal"), { 
     isOpened: true 
    })); 
}; 

Zustand:

import Baobab from "baobab"; 

const state = new Baobab({ 
    modal: { 
     isOpened: false, 
     content: "someContent" 
    } 
}); 

Jetzt kurze Erklärung:

Der Zustand enthält den globalen Zustand, der mit den obigen Werten initialisiert wird. Durch Klicken auf das Inhaltsdiv von SomeComponent wird die openModal-Aktion ausgeführt. Das erste Argument aller Aktionen ist immer der Zustand selbst. Sobald ein Wert des Status geändert wird, werden alle Listening-Komponenten (mit @BaobabBranch) über die neuen Requisiten und Re-Render informiert.

Wenn Sie also eine andere Komponente hinzufügen, können Sie auch den modalen Wert hören. Damit haben Sie alles, was Sie für die Zentralisierung der Modal-Verarbeitung benötigen, und nicht, um die Werte zwischen den Layern auf und ab zu blasen.