구성 요소에서 ES6 클래스 인스턴스 가져 오기

Question

저는 기본 클래스 인 App (ES6 구문)을 사용합니다. 파생 클래스가 상태에 따라 렌더링 할 여러 자식 구성 요소를 지정할 수있게하려고합니다. 예 :

class App { 
    render() { 
    return ( 
     <div>{ this.state.c1 }</div> 
     <div>{ this.state.c2 }</div> 
    ); 
    } 
} 

class MyApp extends App { 
    constructor() { 
    this.state = { 
     c1: <Foo/>, 
     c2: <Bar/> 
    } 
    } 
} 

class Foo extends React.Component { 
    getTitle() { return 'Foo'; } 
} 

또한 하위 클래스에 대해 기본 클래스 인 App, 메소드를 호출해야합니다. 예 : this.state.component.getTitle()

그러나 this.state.c1은 ES6 클래스가 아닙니다 (예 : Foo의 인스턴스가 아닙니다).

기본 클래스가 <Foo/> 구성 요소를 생성하지 않기 때문에 내가 심판을 사용할 수 없습니다. 앱이 여러 하위 구성 요소를 필요로하기 때문에

나는, 구성을 사용할 수 없습니다.

제안 사항?

Answer 1

나는 가장 적절한 방법은 의존성을 반전하는 그림.

즉, 건물 각 성분에 모델 클래스를 "주입". 그런 다음 기본 클래스에서 속성에 액세스합니다.