Wie fügen Sie dynamisch eine React-Komponente in das DOM ein (zum Beispiel einen Dialog)?

Question

Ich möchte Javascript eingebauter alert() Funktion mit einer React Component ersetzen, die die gleiche Aufgabe behandelt: nämlich eine schnelle, ablösbare Nachricht an den Benutzer anzuzeigen.

Jetzt kann ich dies erreichen, indem ich eine Komponente erstelle und sie in mein Markup setze. z.B.

<div> 
    <BunchOfComponents /> 
    <MoreComponents /> 

    <MyAlertDialog open={this.props.shouldShowAlert} /> 
</div> 

Und dann ist es durch Steuern seiner open Zustand über Redex oder was auch immer zeigen, machen.

Was ich jedoch wie würde zu tun, sei es zu nicht erklärt es in meinem Markup kann und stattdessen injizieren es in den dom über eine Funktion. wie

Etwas ...

myCoolFunction() { 
    const alert = (
     <MyAlert 
      open={true} 
      msg="Hello World" 
     /> 
    ) 
    DOM.findNode('someID').insert(alert); <-- fake API obviously 
} 

Ist es möglich, Komponenten wie die dynamisch anhängen?

Answer 1

Das ist die schmutzige Art, wie ich es bei der Arbeit mache (das klang nicht richtig ...) http://codepen.io/matthsiung/pen/JKOpVW

Ich bin mir sicher, es gibt eine bessere "richtige" Möglichkeit, es zu tun, aber es räumt nach sich selbst auf, so dass es für mich funktioniert.

Hier sind die wichtigsten Punkte:

Dialog Trigger

//Your trigger function will render the dialog component to a newly created dummy div, 
// while also passing it into the component as a prop 

function showDialog() { 
    var div = document.createElement('div'); 
    ReactDOM.render(
    <Dialog container={div}/>, 
    document.body.appendChild(div) 
); 
} 

Dialogkomponente:

//When your dialog component closes it unmounts itself 
close(){ 
    ReactDOM.unmountComponentAtNode(this.props.container); 
}, 

//Before unmount it cleans up after itself by removing the dummy div 
componentWillUnmount() { 
document.body.removeChild(this.props.container); 
}, 

Answer 2

Vielleicht kann react-portal Ihnen helfen.

Aus der Dokumentation:

transportiert sein Kind in eine neue Reaktion Komponente und fügt sie den document.body (erstellt ein neue unabhängigen Baum React)

Ich benutze eine Menge (für Dialoge/Modale und Menü Popups). Sehr nützlich und leicht.

Answer 3

Es ist möglich, einige benutzerdefinierte Sachen mit DOM-Manipulation innerhalb von React gerenderten Baum zu injizieren, wenn es als leerer Knoten gerendert wird. Angenommen, Sie sind irgendwo in reagieren die Render:

<div id="you-know-id /> 

Sie können dann diesen Knoten von ID finden und ordnen ihre innerHTML mit etwas. Mehr 'reactish' Weg, es zu tun ist die Verwendung der refs anstelle von ID.

Normalerweise wird dieses Zeug in componentDidMount (wo Sie einfügen) und (wo Sie Methoden entfernen oder abbestellen) gewickelt.

Da, schmutzige Tricks zu tun, möchten Sie wahrscheinlich Speicherlecks vermeiden. Also, es ist der Weg.

Übrigens denke ich nicht, dass es der richtige Weg ist, um das Problem, das Sie gerade beschrieben haben, zu nähern. Was man stattdessen tun könnte, ist so etwas wie dieses:

{ this.props.shouldShowAlert && <MyAlertDialog open={ true } /> } 

Und dann in wird tatsächlich montiert, wenn es geöffnet wird, und unmontiert, wenn es geschlossen ist.

Noch sicherer ist es, die Injektion mit dem Zustand oder Prop-Element zu steuern. Sie müssen wirklich wissen, was Sie tun, wenn Sie die DOM-Manipulation steuern. Sprich, ein paar jQuery-Plugins umschließen :). Dann geht es dir gut, denn es gibt keinen anderen Weg :).