javascript - 从另一个组件修改组件类变量

Question

我的组件中的 Hue 类中有一个变量:

export default class Hue extends Component {


  state = {
    toggleState : false,
    toggleWhite : false
  }


      render(){...}
...
}

在这个组件中，我可以修改这样的值:this.state.toggleState = true

我有另一个处理 websocket 连接的组件，当我接收数据时，我想修改 Hue 类中的数据。但即使我在 websocket 组件中导入 Hue ，我也无法修改该值。

我已经尝试过:Hue.state.toggleState = true 但这是未定义的。

如何访问和修改其他组件的值，或者是否有针对此问题的替代解决方案？

谢谢。

Answer 1

如果 Hue 组件是 websocket 组件的父组件，您可以向 websocket 组件传递一个函数，以便在数据更新时运行。

        <WebSocketHandlingComponent
          onUpdate={latestData => {
            this.setState({toggleState: latestData.toggleState});
          }}
        />

目前尚不清楚您的应用程序是否是这样构建的。如果树的不同级别有多个组件需要访问相同的数据，那么您可能需要适当的状态管理解决方案，例如 redux