Question

我正在尝试将我的子视图（表类）绑定到套接字事件。

var APP = React.createClass({

    displayName: 'APP',

    getInitialState(){

        return {
            tables: [],
        }
    },
    componentWillMount: function componentWillMount() {

        this.socket = io('www.example.com');
        this.socket.on('tables', this.tables);
        // this.socket.on('table', this.table); ????

    },
    emit: function(eventName, payload){

        this.socket.emit(eventName, payload);
    },
    tables(serverState){

        this.setState({ tables: serverState });
    },
    render: function render() {

        return React.createElement(
            'div',
            null,
            React.createElement(Tables, { tables: this.state.tables, emit: this.emit })
        );
    }

});

所以这里我为数组Table类中的每个项创建。当我从表中接收套接字时，我的表被呈现。当我收到包含数组但具有不同状态的现有id的表套接字时，如何呈现它？

var Tables = React.createClass({

  displayName: 'Tables',

  render: function render() {

      return React.createElement("aside", null,

          React.createElement("ul", { className: "class" },
          this.props.tables.map(function (table, i) {

            return React.createElement( Table , { key: i, table: table, emit: this.props.emit });

          }, this)
        )
      );
    }
});

但是如何仅为数组中的一个项绑定更改？仅适用于一个Table类？当我收到socket to table时，我需要做什么来重新渲染这个视图，而不是整个表？

var Table    = React.createClass({

  displayName: 'Table',

  handleClick: function(i) {

    console.log(this.props.table);
  },
  render: function render() {

    return React.createElement("li", {

      onClick: this.handleClick.bind(this, this.key) },

      React.createElement("span", { className: "clscc" + this.props.table.status })

    );
  }
});

我之前在骨干工作，所以一个项目的更改与模型绑定...我怎么能以反应的方式做到这一点？谢谢你的帮助

反应绑定儿童的变化

0 个答案: