使用Babel在ES6(7？)中避免使用.bind

Question

我在我的JSX中有这个:

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

但是,我发誓我已经看到了一些幻想,否定了.bind将回调方法传递给子React组件时的需要,我是对的吗？

Answer 1

您可以使用箭头功能与属性初始化相结合.

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

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

因为箭头函数是在构造函数的范围内声明的,并且因为箭头函数this从它们的声明范围维护,所以它都可以工作.这里的缺点是这些不是原型上的函数,它们都将使用每个组件重新创建.然而,这并不是一个缺点,因为bind结果是相同的.