Mehrere react-Komponenten in ein einzelnes DOM-Element rendern.

Ich möchte mehrere Modale in ein einzelnes ReactDOM-Element rendern. Hier ist die HTML-Struktur, nach der React rendert.Mehrere react-Komponenten in ein einzelnes DOM-Element rendern.

<body> 
    <div id="modal-socket"></div> // Insert multiple here 
    <div id="wrapper"> 
     // Other content goes here 
    </div> 
</body>

Es ist eine lange Geschichte hinter warum ich brauche mehrere Komponenten in # modal-Buchse zu machen, aber ich möchte so etwas wie dies zu tun:

ReactDOM.render(<AddMeasurableModal />, document.getElementById("modal-socket")); 
ReactDOM.render(<AddMeasurableModal />, document.getElementById("modal-socket")); 
ReactDOM.render(<AddMeasurableModal />, document.getElementById("modal-socket"));

Offensichtlich ersetzt dieser den aktuellen Inhalt von #modal -socket bei jedem Render-Aufruf .. Also bekomme ich mein Endergebnis nicht. Boo.

Haben eine Suche und ein paar Antworten gefunden, aber keine meine Bedürfnisse erfüllen.

Prost.

Quelle

2016-05-22 Dezachu

Wie Sie in einem Kommentar sagte, die dynamische Art und Weise so etwas wie dieses Innerhalb einer Hauptkomponente sein würden Sie tun können:

Stellen Sie sich ein Array wie mit:

let myArray = [ 
    { 
    prop1: 'hello world' 
    }, 
    { 
    prop1: 'Hey there!' 
    } 
] 

//Then in the render function (you can put that array into the state or something) 
render(){ 
     return (
     <div> 
      {myArray.map((entry,index) => { 
       return <AddMeasurableModal key={index} {...entry} /> 
      })} 
     </div> 
    ) 
}

dies so viele AddMeasurableModal Komponenten schaffen wird, da es entr sind ys in dem myArray Variable und jede Eigenschaft hinzufügen, um Requisiten auf die Komponente gespeichert (in diesem Fall hat jede AddMeasurableModal Komponente Zugriff auf den this.props.prop1 Wert, weil die {...entry} Spread-Syntax)

Beachten Sie, wie ich nur myArray.map() in denen gesetzt machen Funktion innerhalb von {}? React rendert jedes Array von Komponenten ohne weitere Konfiguration innerhalb der Renderfunktion. Und Array.map() gibt ein Array zurück. Stellen Sie nur sicher, dass nur gültige reaktive Elemente zurückgegeben werden! Vergessen Sie dabei nicht, jedem Element eine uniqe key Stütze hinzuzufügen, um Warnungen zu vermeiden.

EDIT: In diesem Fall ist die key Prop der aktuelle Index im Array, aber beim Abrufen von Daten von einem Server würde ich empfehlen, eine uniqe ID aus der Datenbank oder etwas zu verwenden, um Rendering Fehler zu vermeiden. Wenn Sie nicht über ein Array mappen möchten, können Sie einfach eine Anzahl von Komponenten festlegen und diese dann durchlaufen, ein Array von Komponenten erstellen und diese in die Renderfunktion einfügen.

Quelle

2016-05-22 20:35:54 JoschuaSchneider

https://jsfiddle.net/gk9kaopr/35/ – zloctb

Ihr mehrere Modalverben in 1 Behälter Wickeln und machen, dass, zum Beispiel:

let modals = (
    <div> 
    <AddMeasurableModal /> 
    <AddMeasurableModal /> 
    <AddMeasurableModal /> 
    </div> 
); 

ReactDOM.render(modals, document.getElementById("modal-socket"));

Quelle

2016-05-22 19:56:07 luanped

Danke, das hilft massiv. Können Sie sich vorstellen, wie Sie das dynamisch machen würden? – Dezachu

Das ist ziemlich einfach tho, ich werde ein Beispiel für Sie erstellen – JoschuaSchneider

Mehrere react-Komponenten in ein einzelnes DOM-Element rendern.

Antwort

Verwandte Themen