Question

我遇到了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访问该功能。但没有任何帮助。有什么想法吗？

Answer 1

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

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) {
        ...
    }
}

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

一个有效的jsFiddle示例：https://jsfiddle.net/esnuxz81/3/

Answer 2

这也应该有效：

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);
        ...
    }
}

Answer 3

也许您可以考虑切换到“通量”模式。在您将数据“持久”存储到商店的地方，然后将商店连接到您的组件（例如，通过react-redoux）。通过这种方式，您的组件与服务层无关，无论它们来自何处，重要的是它们的道具。

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

3 个答案: