javascript - 有没有更好的方法在 React Component 类中绑定(bind) 'this'？

Question

我目前正在开发一个 React 应用程序，我发现当一个组件类有很多功能时必须绑定(bind) this 有点麻烦。

例子

class Foo extends Component {
  constructor(props){
    super(props);
    this.function1 = this.function1.bind(this);
    this.function2 = this.function2.bind(this);
    this.function3 = this.function3.bind(this);
  }
  function1() {
    ...
  }
  function2() {
    ...
  }
  function3() {
    ...
  }
}

有没有更有效的方法来做到这一点？

Answer 1

您可以避免使用 transform-class-properties 绑定(bind)方法Babel 插件，这是一个实验性的 ES7 特性。确保启用 stage-0为了使用它。

这允许在定义类方法时使用箭头函数，利用箭头函数的词法绑定(bind)，因此 this 引用函数的上下文(在本例中为类)，如下所示:

class Foo extends Component {
    boundFunction = () => { /* 'this' points to Foo */ }
}