Question

我有如下所示的组件

组件1 ---组件3
   |
   COMPONENT2
  |
Component4

组件2和3是1的子组件，组件4是2的子组件。我需要将我存储为Component3的Component4中的数据传递给将显示它的Component3。我假设这样做的方法是将状态从Component4传递到Component2，它将使用回调进一步将状态发送到Component1，最后Component1将状态向下传递给Component3。这是最好的方法吗？

Answer 1

回调将起作用。另一个常见的解决方案是提升状态。

不是将状态存储在Component4中，只需将状态移动到Component1并将其作为props传递给Component3和4。

就个人而言，我不喜欢长时间的回调链，解除状态对我来说通常感觉更好。

如果你需要在组件之间共享很多状态，你应该开始考虑一个状态管理解决方案，比如Redux或MobX等。

Answer 2

将数据存储在最高公共父级（组件1）中。在component1上创建操作此状态的方法，并在构造函数中将其绑定到它们。然后将状态传递给component3。

class component1 extends React.Component {
   constuctor(props) {
     super(props);
     this.stateChanger = this.stateChanger.bind(this)
     this.state = {
       foo: 'bar'
     }
   }
   stateChanger(e) {
      this.setState({ foo: 'baz' })
   }
   render() {
    <Component3 foo={this.state.foo} />
    <Component2 stateChanger={this.stateChanger} />
   }
}

编辑：将stateChanger函数传递给component4，如下所示：

class Component2 extends React.Component {
  render() {
    return (
      <div>
        <Component4 stateChanger={this.props.stateChanger} />
      </div>
    )
  }
}

然后用它做你想做的事。 Here is an article you should check out!

Answer 3

此问题的最佳和可扩展解决方案是使用 Flux 或 Redux ，这有助于双向数据流。他们有一个存储数据的商店，无论何时我们都可以访问和修改所有组件都可用的数据。

查看Redux，您可以找到使用Redux here

实现的示例

如何让组件将状态传递给父级的兄弟

3 个答案: