React只将Component方法绑定到此 - 解决？

Question

当使用ES6与反应0.14时,有没有办法避免样板？

到现在为止,我不必担心我的函数被绑定到Component我创建但是不再(为什么？!？)的情况和组件只限于Component超类(如果我正确理解错误) .

因此,每次创建新类时我真正需要做的是将此代码添加到构造函数中:

class CustomComp extends React.Component {

  constructor() {
    super();
    this.newFunction = this.newFunction.bind(this);
  }

  newFunction(){
    console.log('This is user defined function');

}
  render() {
    return <button onClick={this.newFunction}>Click</button>
  }
}

因此,如果我不绑定newFunction它将失败(没有道具,状态或任何东西).

有办法解决这个问题吗？

Answer 1

从React文档:

没有自动绑定

方法遵循与常规ES6类相同的语义,这意味着它们不会自动将其绑定到实例.你必须明确地使用.bind(this)或arrow functions =>.

因此,没有一种自动方法可以绑定0.14中新增的所有方法.但是,正如文档所示,您可以:

1)使用箭头功能(但是,如果您使用的是Babel,则需要第0阶段):

class CustomComp extends React.Component {

  constructor() {
    super();
  }

  newFunction = () => {
    console.log('This is user defined function');

}
  render() {
    return <button onClick={this.newFunction}>Click</button>
  }
}

2)你可以绑定到位:

class CustomComp extends React.Component {

  constructor() {
    super();
  }

  newFunction() {
    console.log('This is user defined function');

}
  render() {
    return <button onClick={this.newFunction.bind(this)}>Click</button>
  }
}

3)可以使用箭头函数代替(这是如结合):

class CustomComp extends React.Component {

  constructor() {
    super();
  }

  newFunction() {
    console.log('This is user defined function');

}
  render() {
    return <button onClick={() => this.newFunction()}>Click</button>
  }
}

如果我只有1-2种方法,我倾向于使用数字2和3.数字1很好,但您必须记住每个方法定义的语法.如果我有很多方法,我倾向于在构造函数中绑定.