Ist dies der richtige Weg, um den Zustand der übergeordneten Komponente in react.js

Question

ich den Kontext all meine Hauptkomponente von meinem Kind Komponente auf gesetzt und es funktioniert gut, aber ich weiß nicht, ob dies richtig ist

das ist meine Hauptkomponente

import Child from "./apps/child"; 

export default class NewTest extends Component { 

    constructor(){ 
    super(); 
    this.state={ 
     one:1, 
    } 
    } 

    render() { 
    return (
     <View style={styles.container}> 

     <Text>{this.state.one}</Text> 

     <Child root={this}/> //<----- Here i set all the context of my main Component to the child component 

     <TouchableOpacity onPress={()=>console.log(this.state.one)}> 
      <Text>Touch</Text> 
     </TouchableOpacity> 

     </View> 
    ); 
    } 
} 

und das ist mein Kind Komponente

export default class Child extends Component{ 

    constructor(props){ 
    super(props); 

    this.parent=this.props.root; 
    } 

    render(){ 
    return(
     <View> 
     <TouchableOpacity onPress={()=>{ 
      this.parent.setState({one:this.parent.state.one+1}) // <- if you see here i change the state of the parent, and it work fine 
     }}> 
      <Text>Sum to Parent</Text> 
     </TouchableOpacity> 
     </View> 
    ) 
    } 
} 

All dies funktioniert, aber dann ist dies der richtige Weg, es zu tun?

Answer 1

Nein, ist es nicht. Wenn Sie den Status der übergeordneten Komponente ändern möchten, sollten Sie eine Callback-Funktion als Prop zu dem Kind senden und dann aufrufen. Zum Beispiel könnten Sie eine Funktion in Ihrem Newtest haben:

increaseOne(){ 
    this.setState({one:this.state.one+1}) 
} 

Dann ist es für das Kind mit einer Stütze senden:

<Child increaseOne={this.increaseOne.bind(this)}/> 

Schließlich rufen Sie es in das Kind onPress:

<TouchableOpacity onPress={this.props.increaseOne}> 

Wenn die Anwendung zu komplex wird, können Sie Redux verwenden.

Answer 2

Es ist nicht die beste "React Art", es zu tun. Es wäre besser gewesen, eine Funktion an die untergeordnete Komponente zu übergeben, die als Callback funktionieren sollte (etwas wie "sumToParent"); und die Eltern würden darauf reagieren, indem sie die Summe machen.

Eine andere Option könnte die Verwendung von react-router und react-redux zur Aufrechterhaltung des Status sein.

Answer 3

Was Sie versuchen, ist, die volle Kontrolle über die Komponente zu bekommen. Dies ist nicht der beste Weg, um das Problem zu lösen, und die Hauptargumentation, dass es Sie früher oder später zurückschlagen wird. Die Idee ist es, Hanlders über Requisiten zu übergeben, also werden sie nur aufgerufen, aber ohne Wissen, wie sie funktionieren.

Also, in dem Code (Funktion gebunden sein, hat bereits):

<Child increase={this.increase} decrease={this.decrease} /> 

Mit diesem Ansatz werden Sie bekommen viel leichter zu pflegen und refactor Lösung - zum Beispiel kann die Form der Funktion übergeben invoke einreichen , die am Anfang es nur durch setTimeout vortäuschen kann, aber später mit wirklichem Anruf ersetzt wird.

Es erhöht auch Testbarkeit, verliert die Kopplung und führt zu dem besseren Code im Allgemeinen.