Generische React-Komponenten in TypeScript/JSX?

Question

Ich möchte steckbare React-Komponenten erstellen. Komponenten werden durch ihre Klassennamen aufgelöst, daher bin ich natürlich zu Generika hingezogen; aber das scheint nicht zu funktionieren.

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

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

Gibt es eine alternative Möglichkeit, um steckbare TypeScript-Komponenten zu schreiben?

Answer 1

Dies ist nicht möglich mit Generika zu tun, obwohl es nicht klar ist, warum Sie Generika für dieses Problem verwenden möchten, anstatt nur das innere Element mit dem normalen props Mechanismus bereitzustellen.

Der Grund ist, dass Typen gelöscht werden. Daher müssen Sie der Klasse den Klassenkonstruktor zur Verfügung stellen, sodass sie einen Verweis auf den zu instanziierenden Wert in C enthält. Aber es gibt keinen anderen Ort als JSX props (oder state oder was immer Sie tun müssen), damit Sie diesen Wert übergeben können.

Mit anderen Worten, statt zu schreiben

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

Sie

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

schreiben sollte und verbrauchen es in Ihrem render als

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

Als Nebenwirkung, die richtige Einschränkung ist, new() => React.Component anstatt React.Component - erinnere mich an th Bei den Dingen, die Sie in der JSX schreiben (<Div>, etc) sind die Konstruktoren für Klassen, nicht die Klasse Instanzen.