Question

标题可能更清晰，但这真是我能想到的最好的，抱歉。

所以，我正在尝试在React中创建一个过滤的表组件。但是，我希望过滤器的定义与表本身的定义无关。所以，这就是我在做什么。

我创建了一个Filter组件：

var Filter = React.createClass({
  handleChange : function (value) {
    this.props.updateTable(this.props.columnName,value);
  },
  render : function () {
    //an input that will report its value to this.handleChange
  }
});

然后，我创建了一个Table组件：

var Table = React.createClass({
  filterChanged : function (column, value) {
    //this will be wired as a updateTable prop for the Filter
  },
  render : function () {
    //I am trying not to define a filter here,
    //I am trying to use the previously-defined Filter component.
    //I want the Table component to remain generic and re-usable,
    //with  optional filters.
    var thisComponent = this;
    //I can have as many filters as I want.
    var filterToRender = React.Children.map(this.props.children, function (child) {
      var filterUI;
      if (child.type.displayName === 'Filter') {
        filterUI = React.cloneElement(child, {updateTable : thisComponent.filterChanged});
      }
      return (<div>{filterUI}</div>);
    });
    //along with the rest of the table UI,
    return (<div>
      <table>bla bla</table>
      {filterToRender}
    </div>);
  }
});

然后，在我的主页面中，我将其渲染为：

ReactDOM.render( (<Table>
  <Filter columnName='status'></Filter>
</Table>), document.getElementById('appHolder'));

它渲染得很好。更改功能似乎也很正常。但是，我发现每次更改过滤器值时，它都会触发Table的filterChanged方法，从而增加了次数。首先改变，它会触发2次;第二次改变，6次;第三次改变，14次。

怪异而不可思议。我在这里做错了什么？

Answer 1

就React而言，上述处理程序是正确的。我得到的错误是由于另一个框架（Materialise）使用jquery插件来初始化一些组件。由于它会改变DOM，我需要手动确保onChange事件正确连接到正确的节点。

Fwiw，我将onChange附加到this.handleChange的{{1}} 和{/ 1>} ComponentDidMount的{{1}} 1}}组件。从ComponentDidUpdate删除初始化，解决了问题。这是因为每次更新组件时，Filter的多个实例都绑定到ComponentDidUpdate事件。

在render（）外面添加子进行反应

1 个答案: