React : 상위 구성 요소에서 기본 클래스에 액세스하는 방법

Question

그래서 많은 구성 요소를 확장하는 BaseComponent.jsx이 있습니다. 이것은 잘 작동합니다.

class BaseComponent extends React.Component { 
    constructor(props){ 
     super(props) 
     this.something = true 
    } 
} 

class OtherComponent extends BaseComponent { 
    constructor(props){ 
     super(props) 
     console.log(this.something) // true 
    } 
} 

는하지만 지금은 더 높은 순서 구성 요소에서 구성 요소를 래핑하고 클래스를 장식 react-router에서 withRouter(component)를 사용해야합니다.

그래서 나는이 작업을 수행 :

class OtherComponent extends BaseComponent { 
    constructor(props){ 
     super(props) 
     console.log(this.something) // undefined 
    } 
} 

export default withRouter(OtherComponent) 

문제는 지금은 BaseComponent에서 속성에 액세스 할 수없고 사람들은 undefined를 반환한다는 것입니다.

어떻게하면 HoC를 만들 수 있으며 동시에 기본 클래스의 속성에 액세스 할 수 있습니까?

Answer 1

React 구성 요소 확장은 React 팀에 의해 권장되지 않습니다. 경우에 따라 작동하더라도 상위 구성 요소와 같은 고급 기능을 수행 할 때 결과를 예측할 수 없습니다.

일반적인 확장 구성 요소 클래스는 사용하지 않아야하며, 사용되는 경우에도 스마트 연결 구성 요소에 사용해서는 안됩니다. React 구성 요소의 상속보다 합성을 선호합니다.

그리고

당신은 HOC 구성 요소 선언 반응의 세 가지 형태로 작업해야한다는 단순한 이유에 대한 구성 요소를 확장하는 일반적인 HOC를 구현할 수 없습니다.

출처 : https://github.com/reactjs/react-router/issues/3514

그래서 내 질문에 대한 답변은 할 수없는 내가 조성을 대신 상속으로 이동해야한다는 간단하다.