¿Qué significa el error "El tipo de elemento JSX '...' no tiene ninguna firma de construcción o llamada"?

Ésta es una confusión entre constructores e instancias .

Recuerda que cuando escribes un componente en React:

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

Lo usas de esta manera:

return <Greeter whoToGreet='world' />;

No lo usas de esta manera:

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

En el primer ejemplo, pasamos Greeterla función constructora de nuestro componente. Ese es el uso correcto. En el segundo ejemplo, pasamos una instancia de Greeter. Esto es incorrecto y fallará en tiempo de ejecución con un error como "El objeto no es una función".

El problema con este código.

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

es que está esperando una instancia de React.Component. Lo que quieres es una función que tome un constructor para React.Component:

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

o similar:

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

Aug 04 '2015 17:08 Ryan Cavanaugh