Che cosa significa l'errore "Tipo elemento JSX" ... "non ha costrutto o segnature di chiamata"?

Question

ho scritto qualche codice:

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

sto ottenendo un errore:

JSX element type Elem does not have any construct or call signatures

Che cosa significa?

Answer 1

Questa è una confusione tra i costruttori e istanze.

Ricorda che quando si scrive un componente in React:

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

Si utilizza in questo modo:

return <Greeter whoToGreet='world' />; 

È non lo fanno usarlo in questo modo:

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

Nel primo esempio, stiamo passando intorno a Greeter, th e funzione costruttore per il nostro componente. Questo è l'uso corretto. Nel secondo esempio, stiamo analizzando l'istanza di Greeter. Questo non è corretto e fallirà in fase di esecuzione con un errore come "L'oggetto non è una funzione".

---

Il problema con questo codice

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

è che si aspetta un esempio di React.Component. Ciò che si desidera una funzione che prende un costruttore per React.Component:

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

o simile:

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

Answer 2

Se si vuole prendere una classe di componente come parametro (vs un esempio), utilizzare React.ComponentClass :

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

Answer 3

Quando sto conversione da JSX a TSX e noi mantenere alcune librerie come JS/JSX e conv ERT altri a ts/TSX ho quasi sempre dimentica di cambiare il js/JSX istruzioni import da

import * as ComponentName from "ComponentName";

a

import ComponentName from "ComponentName";

per TSX