Reagieren AppendChild Komponente funktioniert nicht

Question

Ich habe überall gesucht und kann keine Lösung finden.

Ich versuche einfach folgendes zu tun:

import ComponentOne from '../components/component-one' 
import ComponentTwo from '../components/component-two' 

class Home extends Component { 
    constructor(props) { 
     // So I can dynamically call a Component, found no other way 
     this.components = { 
      ComponentOne: <ComponentOne />, 
      ComponentTwo: <ComponentTwo /> 
     } 
    } 

    [...code removed for brevity...] 

    _appendStep(step) { 
     var component = React.cloneElement(this.components[step]) 
     this.steps.appendChild(component) 
    } 
} 

Das scheint mir ziemlich einfach. Ich habe

<div className="recipe-steps" ref={(ref) => this.steps = ref}></div> 

, was ich brauche, um dynamisch appendChild Komponenten zu. Die Sache ist, die "Schritte", die ich an diese <div> anfügen, müssen unbedingt eine der Komponenten sein, die ich erstellt habe, muss mir erlauben, mehrere Komponenten Kinder hinzuzufügen, und sogar duplizieren (deshalb verwende ich React.cloneElement()) Komponenten.

Sobald ich alle "Schritte" angehängt habe, analysiert ein späterer Prozess jeden einzelnen Schritt, um zu bestimmen, wie ein Rezept ausgeführt wird.

Folgende funktioniert gut, aber ich brauchen nicht ein einfaches DOM-Knoten zu schaffen, ich brauche ich habe eine Komponente verwenden, bereits gebaut und dass

var basicElement = document.createElement('h1') 
basicElement.innerHTML = "This works, but I need a component to work too" 
this.steps.appendChild(basicElement) 

ich folgende Fehlermeldung erhalten anhängen, wenn ich versuchen zu this.steps.appendChild(component):

Fehler:

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. 

ich denke, Meine Hauptfrage ist dies: Wie kann ich meine React Component in einen Knoten konvertieren, der mit this.steps.appendChild() verwendet werden kann?

ODER: gibt es eine "React Way", um Kinderkomponenten dynamisch an meine this.steps anzuhängen?

Answer 1

this.steps sollte ein Array sein, dann können Sie das Array mit der Kartenfunktion rendern.

Auch Sie sollten Ihr Array in Ihrem Zustand speichern, um die Komponente nach dem Hinzufügen neuer Schritte automatisch neu zu rendern.

Es sollte diese aussehen

constructor(props) { 
    this.state = { 
     steps: [] 
    } 
    this.components = { 
     ComponentOne: <ComponentOne />, 
     ComponentTwo: <ComponentTwo /> 
    } 
} 
_appendStep(step) { 
     let componentToAdd= this.components[step]; 
     this.setState({steps: this.state.steps.concat([componentToAdd])}) 
    } 

render(){ 
    .... 
    {this.state.steps.map(function(comp,i){ 
     return <div key={'Step' + i}>{comp}</div> 
    })} 

}