화살표 함수(공용 클래스 필드)를 클래스 메서드로 사용하는 방법

화살표 함수(공용 클래스 필드)를 클래스 메서드로 사용하는 방법

Respect와 함께 ES6 클래스를 사용하는 것은 처음입니다.이전에는 현재 오브젝트에 메서드를 바인딩하고 있었습니다(첫 번째 예 참조). 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에서 실험 기능을 사용하려면 여기서 관련 플러그인을 설치하십시오.이 특정 기능에는 플러그인이 필요합니다.

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

클래스 필드 및 정적 속성에 대한 제안에 대한 자세한 내용은 여기를 참조하십시오.

---

아니요, 바인딩된 인스턴스별 메서드를 만들려면 생성자에서 작성해야 합니다.단, 이 경우 화살표 기능을 사용할 수 있습니다..bind시제품 방법:

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

제안서 중 하나를 생략할 수 있는 것이 있습니다.constructor()같은 기능을 가진 과제를 클래스 범위에 직접 넣을 수 있지만 실험성이 높기 때문에 사용하지 않는 것이 좋습니다.

또는 언제든지 를 사용하여 프로토타입에 메서드를 선언한 다음 생성자의 인스턴스에 바인드할 수 있습니다.이 접근방식은 클래스 외부에서 메서드를 변경할 수 있기 때문에 유연성이 높아집니다.

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

화살표 함수를 사용하고 있으며 생성자에서도 바인딩하고 있습니다.따라서 화살표 기능을 사용할 때 바인딩을 수행할 필요가 없습니다.

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);
  }
}

렌더에서 함수를 직접 바인딩하는 것도 권장되지 않습니다.항상 생성자에 있어야 합니다.

이 질문에 충분히 대답한 것은 알고 있습니다만, (실험 기능을 사용하고 싶지 않은 분들을 위해) 조금 공헌하고 싶습니다.컨스트럭터에서 여러 함수 바인드를 바인드해야 하는 문제 때문에 컨스트럭터를 바인드하고 호출하면 자동으로 필요한 메서드 바인딩을 모두 수행하는 유틸리티 메서드를 생각해냈습니다.

컨스트럭터에 대한 다음 클래스가 있다고 가정합니다.

//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);
         });
}

이제 그 유틸리티를 Import하고 콜을 컨스트럭터에 추가하면 컨스트럭터에서 새로운 메서드를 바인드할 필요가 없어집니다.새 생성자는 다음과 같이 깨끗합니다.

//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);
    }
    // ...
}

언급URL : https://stackoverflow.com/questions/31362292/how-to-use-arrow-functions-public-class-fields-as-class-methods