使用 constrocer 绑定后，如何将参数传递给回调方法？

Question

我正在使用以下方式进行回调，因为据说这是最优化/最快的方式：

class Foo extends React.Component {
  constructor() {
    super();
    this._onClick = this._onClick.bind(this);
  }
  render() {
    return (
      <div onClick={this._onClick}>
        Hello!
      </div>
    );
  }
  _onClick() {
    // Do whatever you like, referencing "this" as appropriate
  }
}

但是如果我需要将参数传递给我的_onClick 方法怎么办？ 如果我使用.bind(this) 作为道具，我知道该怎么做，但是我上面展示的方式我不知道如何处理。

顺便说一句，我阅读了here 的文章，但它确实适用于我。

Answer 1

我认为这些文章会澄清很多： article1 和 articles2。您也可以尝试以下实现，它的灵感来自 2 篇文章：

class Foo extends React.Component {
/*
  in your case you need to make the bind under the render call as below
*/

  _onClick() {
    // Do whatever you like, referencing "this" as appropriate
  }

  render() {
    return (
      /*
          this bind here is necessary to precise the params,
          and about the perfermances issues it's very relative to the app composition.
        */
      <div onClick={this._onClick.bind(this /*,var1, var2*/)}>Hello!</div>
    );
  }
}

// a solution for passing properties without
// entring in perfermances issues is to make a small refacto :

class Foo extends React.Component {
  _onClick() {
    // Do whatever you like, referencing "this" as appropriate
  }
  render() {
    return <MyDiv {...this.props} onItemClick={this._onClick}>Hello!</MyDiv>;
  }
}

const MyDiv = React.createClass({
    render() {
      // Don't need a bind here, since it's just calling
      // our own click handler
      return (
        <div onClick={this.handleClick}>Hello!</div>
      );
    },

    handleClick() {
      // Our click handler has access over the this.props,
      // since React.createClass auto bounds this.
      // so it could just pass what it needs along.
      this.props.onItemClick(/*arguments from this.props*/);
    }
  });