ReactTypeをJSXで使用

Question

JSXとTypescriptの統合に関する質問があります。次のコードを考える：

interface Props { 
    component?: React.ReactType 
} 

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

私が手：JSX element type 'Comp' does not have any construct or call signatures.

がどのように私はこの問題を解決するのですか？同様のコードは、componentにelementType小道具react-prop-typesの小冊子バリデータがあるので、文字列かコンポーネントクラスのどちらでもかまいません。

Answer 1

入力タイプの反応タイプの定義を見てみると、3つの異なるタイプの和集合タイプがあり、そのうちの1つが文字列であることがわかります。だから、あなたはそのような問題を抱えていたのです。 React.ReactTypeをReact.ComponentClassに置き換えてみてください。

Answer 2

渡しているコンポーネントをどのように作成していますか？あなたはそれが動作するはずです。このようにそれを作成した場合：

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> 
     ) 
    } 
} 

また、文字列として、html要素（例えば「DIV」）を渡すことができますが、私はそれはあなたがやりたいことだかはわかりません。