Question

我有这个组件。我想向我创建的每个listElement传递一个调用处理程序。如果我使用bind(this)执行此操作，则可以正常使用。问题是我在控制台中从React收到此警告：bind(): You are binding a component method to the component. React does this for you automatically in a high-performance way, so you can safely remove this call.

var MyList = React.createClass({
  render: function () {
    var listElements = this.props.myListValues.map(function (val) {
      return (
        <ListElement onCallHandler={this.props.parentsCallHandler} val={val} />
        );
    }.bind(this));
    return (
      <ul>
          {listElements}
      </ul>
      );
  }
});

如果我不绑定它，我的孩子们不知道呼叫处理程序。我能做些什么不同的事情？

PS：

我知道解构分配，如解释http://facebook.github.io/react/docs/transferring-props.html#transferring-with-...-in-jsx，但我不想使用和谐。

Answer 1

错误来自代码中的其他位置。当您执行this.someFunction.bind(something)而某些内容不是null时，您会收到错误。

this.someFunction.bind({}, foo);    // warning
this.someFunction.bind(this, foo);  // warning, you're doing this
this.someFunction.bind(null, foo);  // okay!

在代码中搜索.bind(this以查找有问题的行。

Answer 2

这是更新的文档示例

React.createClass({
  onClick: function(event) {/* do something with this */},
  render: function() {
    return <button onClick={this.onClick} />;
  }
});

Update in ReactJS Docs

为什么React警告我不要将组件方法绑定到对象？

2 个答案: