如何使用箭头函数(公共类字段)作为类方法?

2020/10/21 01:01 · javascript ·  · 0评论

我是将ES6类与React结合使用的新手,以前我一直将我的方法绑定到当前对象(如第一个示例所示),但是ES6是否允许我将类函数永久地绑定到带有箭头的类实例上?(在作为回调函数传递时很有用。)当我尝试使用CoffeeScript尝试使用它们时,会出现错误:

class SomeClass extends React.Component {

  // Instead of this
  constructor(){
    this.handleInputChange = this.handleInputChange.bind(this)
  }

  // Can I somehow do this? Am i just getting the syntax wrong?
  handleInputChange (val) => {
    console.log('selectionMade: ', val);
  }

这样,如果我要传递SomeClass.handleInputChange给,setTimeout则它将被限制为类实例,而不是window对象。

您的语法略有不同,只是在属性名称后缺少等号。

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

这是一项实验功能。您将需要在Babel中启用实验功能才能进行编译。是一个启用实验的演示。

要在babel中使用实验性功能,您可以从此处安装相关的插件对于此特定功能,您需要transform-class-properties插件

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

您可以在此处阅读有关“类字段和静态属性”提案的更多信息


不,如果要创建绑定的,实例特定的方法,则必须在构造函数中执行此操作。但是,您可以为此使用箭头功能,而不是.bind在原型方法上使用:

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

有一个建议可以允许您省略constructor()和直接将赋值放入具有相同功能的类范围中,但是我不建议您使用它,因为它具有很高的实验性。

或者,您可以始终使用.bind,它允许您在原型上声明方法,然后将其绑定到构造函数中的实例。这种方法具有更大的灵活性,因为它允许从类的外部修改方法。

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

我知道这个问题已经得到了足够的回答,但是我只是做出了一点贡献(对于那些不想使用实验功能的人)。由于必须在构造函数中绑定多个函数绑定并使它看起来凌乱的问题,我想出了一个实用程序方法,该方法一旦在构造函数中绑定并调用,便会自动为您完成所有必要的方法绑定。

假设我有带有构造函数的此类:

//src/components/PetEditor.jsx
import React from 'react';
class PetEditor extends React.Component {
  
   constructor(props){
        super(props);
        this.state = props.currentPet || {tags:[], photoUrls: []};
     
        this.tagInput = null;
        this.htmlNode = null;

        this.removeTag = this.removeTag.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.modifyState = this.modifyState.bind(this);
        this.handleKeyUp = this.handleKeyUp.bind(this);
        this.addTag = this.addTag.bind(this);
        this.removeTag = this.removeTag.bind(this);
        this.savePet = this.savePet.bind(this);
        this.addPhotoInput = this.addPhotoInput.bind(this);
        this.handleSelect = this.handleSelect.bind(this);
        
    }
    // ... actual method declarations omitted
}

看起来很乱,不是吗?现在,我创建了这个实用程序方法

//src/utils/index.js
/**
 *  NB: to use this method, you need to bind it to the object instance calling it
 */
export function bindMethodsToSelf(objClass, otherMethodsToIgnore=[]){
    const self = this;
    Object.getOwnPropertyNames(objClass.prototype)
        .forEach(method => {
              //skip constructor, render and any overrides of lifecycle methods
              if(method.startsWith('component') 
                 || method==='constructor' 
                 || method==='render') return;
              //any other methods you don't want bound to self
              if(otherMethodsToIgnore.indexOf(method)>-1) return;
              //bind all other methods to class instance
              self[method] = self[method].bind(self);
         });
}

我现在需要做的就是导入该实用程序,并向构造函数添加一个调用,并且不再需要在构造函数中绑定每个新方法。现在,新的构造函数看起来很干净,如下所示:

//src/components/PetEditor.jsx
import React from 'react';
import { bindMethodsToSelf } from '../utils';
class PetEditor extends React.Component {
    constructor(props){
        super(props);
        this.state = props.currentPet || {tags:[], photoUrls: []};
        this.tagInput = null;
        this.htmlNode = null;
        bindMethodsToSelf.bind(this)(PetEditor);
    }
    // ...
}

您正在使用箭头功能,并将其绑定到构造函数中。因此,使用箭头功能时无需绑定

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

或者,当您使用如下所示的普通函数时,只需要在构造函数中绑定一个函数

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

  handleInputChange(val){
    console.log('selectionMade: ', val);
  }
}

不建议直接在render中绑定功能。它应该始终在构造函数中

本文地址:http://javascript.askforanswer.com/ruheshiyongjiantouhanshugonggongleiziduanzuoweileifangfa.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!