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

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

1 个答案: