ES6箭头函数可以永久绑定React中的类方法吗？

如何在 ES6 类中使用箭头函数作为类方法

最初将 ES6 类合并到 React 中时，通常的做法是绑定实例明确的方法（如下面的示例所示）。然而，出现了一个关键问题：ES6 是否可以使用箭头函数将类函数永久绑定到类实例，从而简化它们作为回调的使用？

class SomeClass extends React.Component {
  // Bound method
  constructor() {
    this.handleInputChange = this.handleInputChange.bind(this);
  }
}

CoffeeScript 提供了此功能，但目前还不清楚是否可以在 ES6 中可以实现类似的功能。

class SomeClass extends React.Component {
  // Attempted arrow function binding
  handleInputChange(val) => {
    console.log('selectionMade: ', val);
  }
}

这个问题旨在了解箭头函数是否可以永久绑定到 ES6 中的类实例，从而允许它们毫不费力地用作回调函数，确保传递给 setTimeout 等函数时正确的上下文。

解决方案：更正语法

使用定义类方法的原始尝试箭头函数包含一个小语法错误。正确的语法如下所示：

class SomeClass extends React.Component {
  handleInputChange = (val) => {
    console.log('selectionMade: ', val);
  }
}

需要注意的是，此语法需要激活 Babel 中的实验功能才能成功编译。通过安装必要的插件（transform-class-properties），您可以启用这些实验性功能。

此外，您可以在官方提案文档中找到有关类字段和静态属性的全面讨论。

以上是ES6箭头函数可以永久绑定React中的类方法吗？的详细内容。更多信息请关注PHP中文网其他相关文章！