Verwendung von ReactType mit JSX

Question

Ich habe eine Frage bezüglich JSX und Typoskript-Integration. Angesichts der folgenden Code:

interface Props { 
    component?: React.ReactType 
} 

class MyComponent extends React.Component<Props, void> { 
    render() { 
     var Comp = this.props.component 
     return (<Comp></Comp>) 
    } 
} 

ich: JSX element type 'Comp' does not have any construct or call signatures.

Wie kann ich dieses Problem beheben? Ein ähnlicher Code funktioniert gut in Javascript, wo component Prop-Validator elementType von react-prop-types hat, so dass es entweder eine Zeichenfolge oder eine Komponentenklasse sein könnte.

Answer 1

Wenn Sie sich die Definition von react type in typing ansehen, werden Sie feststellen, dass Sie einen Union-Typ von 3 verschiedenen Typen haben, von denen einer eine Zeichenkette ist. Deshalb hattest du so ein Problem. Versuchen Sie, React.ReactType durch React.ComponentClass zu ersetzen.

Answer 2

Wie erstellen Sie die Komponente, die Sie übergeben? Wenn Sie es so schaffen sollte es funktionieren:

interface MyProps { 
    component?: React.ReactType; 
} 

class TestComponent extends React.Component<void, void> { 
    render() { 
     return <div>Test</div>; 
    } 
} 

class MyComponent extends React.Component<MyProps, void> { 
    render() { 
     const Comp = this.props.component 
     return (<Comp/>); 
    } 
} 


class Parent extends React.Component<{}, {}> { 
    render() { 
     return (
      <MyComponent component={TestComponent}></MyComponent> 
     ) 
    } 
} 

Sie auch ein HTML-Element als String (beispielsweise „div“) passieren könnte, aber ich bin nicht sicher, ob das, was Sie tun wollte.