Компоненты Generic React в TypeScript/JSX?

Question

Я хотел бы создать подключаемые компоненты Reactable. Компоненты разрешаются по именам классов, поэтому я, естественно, обращается к дженерикам; но это, похоже, не работает.

class Div<P, S, C extends React.Component> extends React.Component<void, void> { 

    render() { 
     return (
      <div> 
       <C /> // error: Cannot find name 'C'. 
      </div> 
     ); 
    } 
} 

Есть ли альтернативный способ записи подключаемых компонентов TypeScript?

Answer 1

Это невозможно сделать с помощью дженериков, хотя неясно, почему вы хотели бы использовать генерики для этой проблемы, а не просто предоставлять внутренний элемент, используя обычный механизм props.

Причина в том, что типы стираются, поэтому вам необходимо предоставить класс-конструктор классу, чтобы он ссылался на значение для создания экземпляра в C. Но нет места, кроме JSX props (или state или что вам нужно сделать), чтобы вы могли передать это значение.

Другими словами, вместо написания

// not sure what you would expect the syntax to be? 
const elem = <Div<Foo> ... />; 

Вы должны написать

const elem = <Div myChild={Foo} /> 

и потреблять его в вашем render как

const Child = this.props.myChild; 
return <div><Child /></div>; 

Как и в сторону, правильное ограничение new() => React.Component, а не React.Component - запомнить на то, что вы пишете в JSX (<Div> и т. д.), являются конструкторами для классов, а не класса экземпляров.