Javascript 这是在react.js中设置父组件状态的正确方法吗

我从我的子组件中设置了主组件的所有上下文，它工作得很好，但我不知道这是否正确

这是我的主要组成部分

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>
    );
  }
}

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>
    )
  }
}

从“/apps/Child”导入子项；
导出默认类NewTest扩展组件{
构造函数（）{
超级（）；
这个州={
一:一,，
}
}
render（）{
返回(
{this.state.one}
//  
触碰
);
}
}

这是我的子组件

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>
    );
  }
}

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>
    )
  }
}

导出默认类子扩展组件{
建造师（道具）{
超级（道具）；
this.parent=this.props.root；
}
render（）{
返回(
{
this.parent.setState（{one:this.parent.state.one+1}）/
加总到母公司
)
}
}

所有这些都是可行的，但这是正确的方法吗？

这不是最好的“反应方式”。最好将函数传递给应该用作回调的子组件（类似于“sumToParent”）；父组件将通过求和对其作出反应

另一种选择是使用react-router和react-redux来维护状态。

这不是最好的“react-way”方法。最好将函数传递给应该用作回调的子组件（类似于“sumToParent”）；父组件将通过求和对其作出反应

---

另一个选项可以是使用react-router和react-redux来维护状态。

不，不是。如果要更改父组件的状态，应将回调函数作为道具发送给子组件，然后调用它。例如，您可以在新测试中使用一个函数：

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

然后，用道具将其发送给孩子：

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

最后在子onPress中调用它：

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

---

如果应用程序太复杂，可以使用。

不，不是。如果要更改父组件的状态，应将回调函数作为道具发送给子组件，然后调用它。例如，您可以在新测试中使用一个函数：

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

然后，用道具将其发送给孩子：

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

最后在子onPress中调用它：

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

---

如果应用程序变得太复杂，您可以使用。

您试图做的是完全控制组件。这不是解决问题的最佳方法，主要原因是它迟早会回击您。我们的想法是通过道具传递hanlders，这样它们就可以被调用，但不知道如何调用他们工作

因此，在代码中（函数必须已经绑定）：

使用这种方法，您将更容易维护和重构解决方案–例如，表单可以调用传递的提交函数，该函数在开始时可以通过

setTimeout

伪造它，但稍后将替换为real call

---

它还增加了可测试性，放松了耦合，并总体上产生了更好的代码。

您试图做的是完全控制组件。这不是解决问题的最佳方法，主要原因是它迟早会让您回击。这个想法是通过道具传递handles，这样他们就只需要但不知道它们是如何工作的

因此，在代码中（函数必须已经绑定）：

使用这种方法，您将更容易维护和重构解决方案–例如，表单可以调用传递的提交函数，该函数在开始时可以通过

setTimeout

伪造它，但稍后将替换为real call

它还提高了可测试性，减少了耦合，总体上产生了更好的代码