ES6 React 组件中箭头函数可以永久绑定类方法吗？-js教程-PHP中文网

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

Mary-Kate Olsen

发布： 2024-12-10 03:42:16

原创

762 人浏览过

Can Arrow Functions Permanently Bind Class Methods in ES6 React Components?

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

在使用 ES6 类开发 React 应用程序时，将方法绑定到当前对象是过去的常见做法。但是，箭头函数可以用于将类函数永久绑定到实例，特别是对于回调函数吗？

以前，人们会使用以下语法绑定方法：

class SomeClass extends React.Component {
  constructor(){
    this.handleInputChange = this.handleInputChange.bind(this)
  }
}

登录后复制

尝试使用箭头函数代替：

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

登录后复制

结果错误。

使用箭头函数作为类方法的语法略有不同。属性名称后面需要一个等号：

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

登录后复制

此功能是实验性的，需要transform-class-properties Babel 插件来编译：

{
  "plugins": [
    "transform-class-properties"
  ]
}

登录后复制

通过安装插件npm:

npm install --save-dev babel-plugin-transform-class-properties

登录后复制

启用实验性功能后，传递 SomeClass.handleInputChange 作为回调函数将作用于类实例，而不是窗口对象。

有关更多信息，请参阅类字段和静态属性的提案。

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