Question

我很困惑，我应该在ReactJS中绑定胖箭头函数吗？

正常功能在没有绑定的情况下无法正常工作但我不知道胖箭头功能是否应该绑定

Answer 1

不，您不需要绑定this箭头功能。它们与封闭上下文具有相同的this值。

this.myValue = 5;

const myFunc = () => {
   this.myValue = 10;
}

myFunc();

console.log(this.myValue); // 10

有关详细信息，请参阅here。

Answer 2

如果您的绑定功能需要this（似乎是强制性的），您实际上需要正确绑定this。最好的方法（由airbnb eslinter推荐）是胖箭头功能。

作为一个例子，让我们假设我有这个组件：

class MyComponent extends React.Component {

  toBeRunOnSpanClick() {
    this.props.clickHandler();
  }

  render() {return <span onclick={/* What should you use here*/}></span>}
}

这不起作用：

class MyComponent extends React.Component {

  toBeRunOnSpanClick() {
    this.props.clickHandler();
  }

  render() {return <span onclick={this.toBeRunOnSpanClick}></span>}
}

toBeRunOnSpanClick函数中的this与您的类不同。这就是javascript的工作方式。

好方法是：

class MyComponent extends React.Component {

  toBeRunOnSpanClick() {
    this.props.clickHandler();
  }
  // this.toBeRunOnSpanClick.bind(this) will work too but it is way less comprehensive
  render() {return <span onclick={() => {this.toBeRunOnSpanClick()}}></span>}
}

我很困惑，我应该在ReactJS中绑定胖箭头功能吗？

2 个答案: