首页 > 云开发 > JavaScript > 正文

后台-系统设置-扩展变量-手机广告位-内容正文顶部

使用 ES7 Decorators 简化this的绑定

JavaScript

1.修改babelrc文件

{
  "presets": ["es2015", "react", "stage-1"],
  "plugins": ["transform-decorators-legacy"]
}

2.安装 decorator 插件

npm i -S babel-plugin-transform-decorators-legacy

3.修改webpack中loader的配置

module: {
  loaders: [
    {
      test: /\.js$/,
      exclude: /node_modules\/(?!(stardust))/,
      loader: 'babel',
      query: {
        cacheDirectory: true,
        plugins: [
          'transform-runtime',
          'add-module-exports',
          'transform-decorators-legacy',
        ],
        presets: ['es2015', 'react', 'stage-1'],
      },
    }
  ]
}

4.安装autobind 的库

npm install autobind-decorator

5.写法改进

class MyClass extends Component {
  constructor(props, context) {
    this.onChange = this.onChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
    
    this.state = {isLoading: true}
  }
  
  onChange() {}
  handleSubmit() {}
}
class MyClass extends Component {
  state = {isLoading: true}
  
  @autobind
  onChange() {}
  
  @autobind
  handleSubmit() {}
}
文章来源:segmentfault,作者:gecko23。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:william.shi#ucloud.cn(邮箱中#请改为@)进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
后台-系统设置-扩展变量-手机广告位-内容正文底部

本文标签

绑定 decorators this ES6

推荐文章

热门标签

    热门文章 最新文章 文章云

站内导航

全站搜索