Question

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

这是我的主要成分

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

这一切都有效，但这是正确的方法吗？

Answer 1

不，不是。如果要更改父组件的状态，则应将回调函数作为prop发送给子组件，然后调用它。例如，您可以在NewTest中使用函数：

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

然后，用支柱将其发送给孩子：

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

最后在子节点onPress中调用它：

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

如果应用程序过于复杂，您可以使用Redux。

Answer 2

这不是最好的＆＃34;反应方式＆＃34;去做吧。最好将一个函数传递给应该作为回调的子组件（类似于＆＃34; sumToParent＆＃34;）;并且父母会通过赚钱来做出反应。

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

Answer 3

您要做的是完全控制组件。这不是解决问题的最佳方法，也是迟早会反击的主要原因。这个想法是通过道具传递hanlders，所以它们只是被调用，但不知道它们是如何工作的。

所以，在代码中（函数必须已绑定）：

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

通过这种方法，您可以更轻松地维护和重构解决方案 - 例如，表单可以调用传递的提交函数，该函数在开始时可以通过setTimeout伪造它，但稍后将会取而代之的是真实的电话。

它还增加了可测试性，使耦合失效并导致更好的代码。

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

3 个答案: