React构造器绑定回调方法后如何传递参数？

好问题！你已经用了构造器提前绑定this这种性能友好的方式处理回调，现在要给_onClick传参数的话，有几种实用方案，我给你一一拆解：

方案1：用箭头函数包裹回调（灵活直接） #

因为你已经在构造器里把_onClick的this绑定好了，所以在render里只需要用箭头函数包裹它，顺便传入参数就行：

class Foo extends React.Component {
  constructor() {
    super();
    this._onClick = this._onClick.bind(this);
  }
  render() {
    // 可以是任意你想传递的参数，比如状态、props里的值
    const customParam = "这是我要传的参数";
    return (
      <div onClick={() => this._onClick(customParam)}>
        Hello!
      </div>
    );
  }
  _onClick(param) {
    // 这里既可以正常使用this，也能拿到传递的param
    console.log(this, param);
    // 执行你的业务逻辑
  }
}

这种方式优点是灵活，不管参数是字符串、数字还是复杂对象都能直接传；唯一小缺点是每次render时会创建一个新的箭头函数，不过大多数场景下这种性能影响可以忽略。

方案2：利用DOM的data属性（性能更优） #

如果你的参数是可以转成字符串的类型，推荐用这种方式，不会额外创建函数：

class Foo extends React.Component {
  constructor() {
    super();
    this._onClick = this._onClick.bind(this);
  }
  render() {
    const customParam = "这是我要传的参数";
    return (
      <div onClick={this._onClick} data-param={customParam}>
        Hello!
      </div>
    );
  }
  _onClick(event) {
    // 通过event.currentTarget获取绑定的data属性
    const param = event.currentTarget.dataset.param;
    console.log(this, param);
    // 执行你的逻辑
  }
}

这里要注意用currentTarget而非target——如果点击的是元素的子节点，target会指向子元素，而currentTarget始终指向绑定事件的那个div。不过这种方式只适合传可序列化的简单数据，复杂对象不太方便。

方案3：构造器中绑定带固定参数的函数（适合参数不变的场景） #

如果你的参数是组件初始化时就固定的，不会随状态或props变化，那可以直接在构造器里绑定带参数的函数：

class Foo extends React.Component {
  constructor() {
    super();
    const fixedParam = "固定不变的参数";
    // 直接把参数绑定到_onClick上
    this._onClickWithFixedParam = this._onClick.bind(this, fixedParam);
  }
  render() {
    return (
      <div onClick={this._onClickWithFixedParam}>
        Hello!
      </div>
    );
  }
  _onClick(param) {
    console.log(this, param);
    // 执行逻辑
  }
}

这种方式的好处是不会在render时创建新函数，性能最优；但缺点是参数固定，没法动态改变。

总结一下：如果参数是动态变化的，优先选方案1或方案2；如果参数固定，方案3最适合。

内容的提问来源于stack exchange，提问作者farmcommand2