Wie ändert sich der Zustand oder die Eigenschaft einer äußeren/separaten Komponente in reactjs?

Question

Aktuelle DOM-Baum ist wie:

<comp1> 
    <div> 
     <comp2></comp2> 
     <comp3> 
     <comp4 /> 
     <comp4 /> 
     ......... 
     ......... 
     ......... 
     </comp3> 
    </div> 
    <comp5></comp5> 
</comp1> 

Component5 das heißt mein modal ist. Ich möchte seinen Zustand und Requisiten durch Onclick-Ereignis auf

setzen Mein Ziel ist es, die Detaildaten auf einem Modal basierend auf der Auswahl anzuzeigen. Also muss ich den Zustand und die Stützen der modalen Komponente entsprechend einstellen. Wie kann ich das in der aktuellen Struktur?

Answer 1

Die altmodische Methode, die für eine kleine Seite geeignet ist, besteht darin, alle Status in den Stammknoten (comp1) zu verschieben. Andere Komponenten werden staatenlos. Der Stammknoten übergibt den untergeordneten Elementen die Eigenschaften, die gerendert werden sollen, sowie die zum Ändern der Eigenschaften erforderlichen Setter. Zum Beispiel bekommt comp5 eine Eigenschaft username, die nur den Wert von comp1.state.username ist, sowie eine Eigenschaft setUsername, die eine Funktion eines username String-Parameter nehmen, in dem comp1setState nutzt seine staatlichen username zu aktualisieren. Auf diese Weise kann comp5und den Benutzernamen aktualisieren, und andere Komponenten sind sich der Änderung bewusst (setState löst ein Rendern von Kindern aus).

Für komplexere Anwendungen wird die Übergabe all dieser Eigenschaften an Kinder mühsam, und Sie können auf Framework wie flux und redux zurückgreifen.

Answer 2

ich denke, Standard Art und Weise tun so etwas wie dieses

in Ihrer reagieren Komponente ist:

constructor(props) { 
    ... 
    this.state = {selectedComp4: null 
     ... 
     } 
    } 
... 
handleSelectedComp4Change (yourData) { 
    this.setState({selectedComp4: yourData}) 
} 
... 
render() { 
... 
    return (
    <comp1> 
    <div> 
     <comp2></comp2> 
     <comp3> 
      <comp4 onSelectedComp4Change = {this.handleSelectedComp4Change}/> 
      <comp4 onSelectedComp4Change = {this.handleSelectedComp4Change}/> 
      ... 
     </comp3> 
    </div> 
    <comp5 SelectedComp4={this.state.selectedComp4}></comp5> 
    </comp1> 
    ) 
} 

in COMP4 senden Sie Ihre Daten: onClick={() => { this.props.onSelectedComp4Change(someData) }}

in COMP5 benutzen, um Ihre Daten in this.props.SelectedComp4

EDIT:

wie @ Valéry sagte