Получение экземпляров класса ES6 из компонента

Question

У меня есть базовый класс, приложение (синтаксис 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'; } 
} 

Мне также необходимо иметь базовое приложение класса, методы вызова для дочерних компонентов. Например, this.state.component.getTitle()

Однако this.state.c1 не является классом ES6 (то есть не является экземпляром Foo).

Я не могу использовать refs, так как базовый класс не создает компонент <Foo/>.

Я не могу использовать композицию, поскольку для приложения требуется несколько дочерних компонентов.

Любые предложения?

Answer 1

Я считаю, что наиболее подходящий подход заключается в инверсии зависимости.

I.e., «вводят» класс модели в каждый компонент как свойство. Затем войдите в свойство из базового класса.