「JSX 要素タイプ '...' にはコンストラクトまたは呼び出しシグネチャがありません」というエラーはどういう意味ですか? 質問する

Question

これはコンストラクターとインスタンスの混同です。

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を渡しています。これは誤りであり、実行時に「オブジェクトは関数ではありません」などのエラーが発生して失敗します。

このコードの問題点

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

Answer 1