reactjs - 如何在 React.js 中更新来自网络套接字服务器的值？

Question

我是 React 的新手，正在尝试设置然后更新 javascript 中的 websocket 对象的值，以使用 React 将其呈现到界面。

下面是我正在使用的整个 javascript 代码。我尝试在 React 中使用 componentDidMount() 和 componentWillMount() 方法，但似乎没有任何效果。

谁能告诉我怎么做？到来的值(value)是不断变化的。我在下面添加了我正在试验的代码，但这似乎也不起作用。如果任何类似的解决方案也会有所帮助。

var client = new WebSocket('ws://localhost:8000/','echo-protocol');
        var val =null;

               client.onerror = function() {
                   console.log('Connection Error');
               };

               client.onopen = function() {
                  function sendNumber() {
                       if (client.readyState === client.OPEN) {
                           var number = Math.round(Math.random() * 0xFFFFFF);
                           client.send(number.toString());
                           setTimeout(sendNumber, 1000);
                       }
                   }
                   sendNumber();
               };

               client.onclose = function() {
                   console.log('echo-protocol Client Closed');
               };
        /*
               client.onmessage = function(e) {
                   if (typeof e.data === 'string') {
                        val=e.data;
                     console.log("Received: '" + val + "'");
                   }
               };

            */

               var ReceivedData = React.createClass({
                  getInitialState: function() {
                     return { value : [] };
                  },

                  componentDidMount: function() {
                      client.onmessage = function(e) {
                           if (typeof e.data === 'string') {
                                this.setState({
                                    value: e.data
                                })
                           }
                       };
                      },

                  render: function() {
                        return (React.createElement("div",this.state.value))
                    }
             });

            ReactDOM.render(React.createElement(ReceivedData,null), document.getElementById("container"));

Answer 1

这是一个固定的代码。 Demo(using jsx)

var ReceivedData = React.createClass({

  getInitialState: function() {
    return {
      data: ''
    };
  },

  componentDidMount: function() {
    client.onmessage = function(e) {
      this.setState({
        data: e.data
      });
    }.bind(this); // you need to bind here
  },
  render: function() {
    // pass children (text content) as the 3rd argument
    return React.createElement("div", null, this.state.data);
  }
});

ReactDOM.render(
  React.createElement(ReceivedData, null), // react element
  document.getElementById("container")); // incorrect parenthesis