Ändern der Requisiten/des Status der dynamisch generierten untergeordneten Komponente aus den Daten, die das übergeordnete Element erhält

Question

Die Hauptidee ist, dass, wenn dynamisch generierte Komponenten vorhanden sind, ihre Requisiten/Zustände von der übergeordneten Komponente geändert werden können. Wie kann der Elternteil wissen, welche Kindkomponente aktualisiert werden soll?

kann ich der übergeordneten Komponente irgendwie sagen, den Status festzulegen und den Wert an die richtige untergeordnete Komponente zu übergeben, anstatt alle untergeordneten Komponenten zu ändern, die untergeordneten Komponenten sind alle ähnlich (Klone, aber jeder kann unterschiedliche Requisiten haben))

das ist mein grundlegender Code und ich möchte den Zustand von nur 1 Span statt beide ändern, ich möchte diese Idee auf Komponenten anwenden.

class MainApp extends React.Component { 
constructor(props){ 
super(props) 

this.ChangeText= this.ChangeText.bind(this) 
this.state={ 
    text: "hi" 
} 
} 

ChangeText(e){ 
this.setState ({ 
    text: "hellow" 
    }) 
} 




render() { 
    return (
    <div> 
     <button onClick={this.ChangeText}>Click </button> 
     <span>{this.state.text}</span> 
     <span>{this.state.text}</span> 
    </div> 
    ); 
    } 
} 

Answer 1

Sie werden jede Spanne irgendwie identifizieren müssen, ist es auf einem Index basieren könnten (dh. Text1, text2, text3, und so weiter ...) dann diese einzeln in den Zustand verwalten, die Sie werden so etwas wie haben:

this.setState({ 
    text1: "hello", 
    text2: "how are", 
    text3: "you doing?" 
}); 

und in Ihrem render-Methode:

render() { 
    return (
    <div> 
     <span>{this.state.text1}</span> 
     <span>{this.state.text2}</span> 
     <span>{this.state.text3}</span> 
    </div> 
); 
} 

das gleiche Verhalten für Komponenten verwendet werden können, wie reagieren die aktualisierten Requisiten, um jede Komponente neu rendern und passieren mit der Teil des Staates dass du aktualisierst.