如何在 React 中更新父级的状态? [英] How can I update the parent's state in React?

问题描述

我的结构如下:

组件 1- |- 组件 2- - |- 组件 4- - - |- 组件 5组件 3

组件 3 应根据组件 5 的状态显示一些数据.

由于 props 是不可变的，我不能简单地将其状态保存在组件 1 中并转发它，对吗?是的，我已经阅读了 Redux，但我不想使用它.我希望可以通过反应来解决它.我错了吗?

解决方案

对于子父通信，你应该传递一个函数来设置从父到子的状态，像这样

<预><代码>class Parent 扩展 React.Component {构造函数(道具){超级(道具)this.handler = this.handler.bind(this)}处理程序(){this.setState({someVar: '一些价值'})}使成为() {return <Child handler = {this.handler}/>}}class Child 扩展 React.Component {使成为() {return

通过这种方式，子进程可以通过调用通过 props 传递的函数来更新父进程的状态.

但是您必须重新考虑组件的结构，因为据我了解，组件 5 和 3 并不相关.

一种可能的解决方案是将它们包装在一个更高级别的组件中，该组件将包含组件 1 和 3 的状态.该组件将通过 props 设置较低级别的状态.

My structure looks as follows:

Component 1

 - |- Component 2


 - - |- Component 4


 - - -  |- Component 5

Component 3

Component 3 should display some data depending on state of Component 5.

Since props are immutable, I can't simply save its state in Component 1 and forward it, right? And yes, I've read about Redux, but I don't want to use it. I hope that it's possible to solve it just with react. Am I wrong?

解决方案

For child-parent communication you should pass a function setting the state from parent to child, like this

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

    this.handler = this.handler.bind(this)
  }

  handler() {
    this.setState({
      someVar: 'some value'
    })
  }

  render() {
    return <Child handler = {this.handler} />
  }
}

class Child extends React.Component {
  render() {
    return <Button onClick = {this.props.handler}/ >
  }
}

This way the child can update the parent's state with the call of a function passed with props.

But you will have to rethink your components' structure, because as I understand components 5 and 3 are not related.

One possible solution is to wrap them in a higher level component which will contain the state of both component 1 and 3. This component will set the lower level state through props.

这篇关于如何在 React 中更新父级的状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！