[解決済み] [エラー "JSX element type '...' does not have any construct or call signatures "の意味は何ですか？

質問

コードを書きました。

function renderGreeting(Elem: React.Component<any, any>) {
    return <span>Hello, <Elem />!</span>;
}

エラーが発生するのですが。

JSX要素タイプ Elem はコンストラクトやコールシグネチャを持ちません

どういう意味ですか？

どのように解決するのですか？

の混同です。 コンストラクタ と インスタンス .

Reactでコンポーネントを書くときは、そのことを忘れないでください。

class Greeter extends React.Component<any, any> {
    render() {
        return <div>Hello, {this.props.whoToGreet}</div>;
    }
}

こんな風に使うんですね。

return <Greeter whoToGreet='world' />;

あなた まさか はこのように使います。

let Greet = new Greeter();
return <Greet whoToGreet='world' />;

最初の例では、周囲に Greeter を使用することができます。 コンストラクタ関数 を作成します。これが正しい使い方です。2つ目の例では、コンポーネントに対して インスタンス の Greeter . これは不正確で、実行時に "Object is not a function" のようなエラーで失敗します。

このコードの問題点

function renderGreeting(Elem: React.Component<any, any>) {
    return <span>Hello, <Elem />!</span>;
}

を期待していることです。 インスタンス の React.Component . 欲しいのは コンストラクタ に対して React.Component :

function renderGreeting(Elem: new() => React.Component<any, any>) {
    return <span>Hello, <Elem />!</span>;
}

などとする。

function renderGreeting(Elem: typeof React.Component) {
    return <span>Hello, <Elem />!</span>;
}