React?에서 부모 클래스 메서드를 재정의하는 방법?

Question

나는 기본 클래스를 확장하고 기본 클래스의 메서드를 재정의합니다. 하지만 그것을 호출하면 슈퍼 클래스 버전을 호출합니다. 방법을 어떻게 재정의합니까? 그러나 "이것은 : 슈퍼"인쇄 : 나는 그것을 인쇄 할

var Hello = React.createClass({ 

     getName: function() { return "super" }, 

     render: function() { 

      return <div>This is: {this.getName()}</div>; 
     } 
    }); 

    class HelloChild extends Hello { 
     constructor(props) { 
      super(props); 

      console.log(this.getName()); 
     } 
     getName() 
     { 
      return "Child"; 
     } 
    }; 

는 "자식입니다"

Answer 1

내가 (여기에서 적응 : https://gist.github.com/Zodiase/af44115098b20d69c531) 대답 발견 - 기본 클래스도 할 필요를

당신이 처음에이 작업을 수행해야하는 이유 궁금

, 내 지점이 있다는 것입니다 :

class Hello extends React.Component { 

     //abstract getName() 
     getName() 
     { 
      if (new.target === Hello) { 
       throw new TypeError("method not implemented"); 
      } 
     } 

     render() { 

      return <div>This is: {this.getName()}</div>; 
     } 
    }; 

Answer 2

이 대답은 다른 접근 방식을 제안하고 있습니다 : ES6의 방식으로 정의 두 개의 반응 컴포넌트를 직접 연결하는 것은 React에서 재사용 가능성을 구현하는 올바른 방법이 아닙니다.

하나의 부모를 확장하는 여러 하위 구성 요소를 사용하려는 경우 하위 구성 요소와 상위 구성 요소를 가진 다음 Composition을 사용하여 공통 기능을 구현합니다. 이렇게하면 오버라이드하려는 메소드를 건너 뛸 수 있으므로 모든 것이 명확하게 유지됩니다.

Answer 3

문제는 예전 Javascript 선언 (예 : HelloChild)과 ES6 유형 클래스 선언 (예 : Hello)을 혼합하는 것입니다. HelloChild를 수정하려면 메서드를 클래스에 바인딩하십시오.

class HelloChild extends Hello { 
    constructor(props) { 
     super(props); 

     this.getName = this.getName.bind(this); // This is important 

     console.log(this.getName()); 
    } 

    getName() 
    { 
     return "Child"; 
    } 
}; 

그러면 작동합니다.

Answer 4

사실 당신은 당신의 서브 클래스에서 코드를 실행하는 방법을 재정의 할 수 있습니다

class Hello extends React.Component { 
getName() { 
super.getName(); 
} 
} 


class HelloChild extends Hello { 
getName() 
    { 
     return "Child"; 
    } 
}