reactjs - 使用 Babel 避免 ES6(7?) 中的 .bind

Question

我的 JSX 中有这个:

<Options options={options} onOptionSelect={this.onOptionSelect.bind(this)} />

但是，我发誓我在将回调方法传递给子 React 组件时看到了一些不需要 .bind 的奇思妙想，对吗？

Answer 1

您可以使用arrow function结合属性初始化。

class Component extends React.Component {
  handleClick = () => {
    console.log(this.props);
  }

  render() {
    return <div onClick={this.handleClick} />
  }
}

因为箭头函数是在构造函数的作用域中声明的，并且箭头函数在其声明作用域中维护 this，所以一切都有效。这里的缺点是这些不会是原型(prototype)上的函数，它们都将随每个组件重新创建。不过，这并不是什么坏处，因为 bind 会产生同样的结果。