如何从WebSocket回调访问React中的组件方法

How to access component method in React from a WebSocket callback

本文关键字：组件 方法 React 访问 WebSocket 回调      更新时间：2023-09-26

我对Javascript和React有问题。我想基于来自WebSocket的推送消息来更改组件状态。

我的问题是，我不知道如何从WebSocket回调中调用函数handlePushMessage。这是代码：

const MainPage = React.createClass({
    ...
    componentDidMount: function() {    
        var connection = new WebSocket('ws://localhost:12345');
        connection.onmessage = function (e) {
            var jsonData = JSON.parse(e.data);
            handlePushMessage(jsonData);
        };
    },
    handlePushMessage: function(data) {
        ...
    }
}

我尝试了不同的语法来指定该函数，并尝试通过this访问该函数。然而，一切都无济于事。有什么想法吗？

尝试使用它（在回调之前保存）：

const MainPage = React.createClass({
    ...
    componentDidMount: function() {    
        const connection = new WebSocket('ws://localhost:12345');
        const that = this;
        connection.onmessage = function (e) {
            const jsonData = JSON.parse(e.data);
            that.handlePushMessage(jsonData);
        };
    },
    handlePushMessage: function(data) {
        ...
    }
}

说明：在回调中，this指的是连接对象，而不是您创建的类。

一个正在工作的jsFiddle示例：https://jsfiddle.net/esnuxz81/3/

这也应该起作用：

const MainPage = React.createClass({
    ...
    componentDidMount: function() {    
        var connection = new WebSocket('ws://localhost:12345');
        connection.onmessage = this.handlePushMessage;
    },
    handlePushMessage: function(e) {
        var jsonData = JSON.parse(e.data);
        ...
    }
}

也许您可以考虑切换到"通量"模式。在将数据"持久化"到存储区的地方，然后将存储区连接到组件（例如通过react-redoux）。通过这种方式，您的组件是服务层的不可知论者，重要的是它们的道具，无论它们来自哪里。

相关文章：