Come importare correttamente React JSX da un file separato in Typescript 1.6

Question

Ho il seguente file app.tsx che funziona correttamente caricando un elemento App da un oggetto React.Component e un elemento Worklist figlio da un altro React.Component (entrambe le classi definite nel stesso file app.tsx). Questo è in esecuzione in Visual Studio con Typescript 1.6 installato (versione ECMAScript: ECMAScript 5, compilation JSX: React, Module System: CommonJS).

Tuttavia, mi piacerebbe dividere questi due componenti in file separati. Tuttavia, quando ho rimuovere il commento l'importazione di WorkList e rimuovere la definizione della classe per il componente WorkList da app.tsx - viene a mancare con un errore:

Error TS2604 JSX element type 'WorkList' does not have any construct or call signatures.

Ecco l'lavora app.tsx e il worklist.tsx desiderato.

// app.tsx 
import * as React from "react"; 
import * as ReactDOM from "react-dom"; 
//import * as WorkList from "./worklist"; 

interface Props { 
    foo: string; 
} 

class WorkList extends React.Component<Props, {}> { 
    constructor(props: Props) { 
     super(props); 
    } 
    render() { 
     return <h2>WorkList!{this.props.foo} </h2> 
    } 
} 
class App extends React.Component<Props, {}> { 
    constructor(props: Props) { 
     super(props); 
    } 
    public render() { 
     return <WorkList foo="baz"></WorkList> 
    } 
} 


ReactDOM.render( 
    React.createElement(App, { foo: 'bar' }), 
    document.getElementById('app') 
); 




//worklist.tsx 
import * as React from "react"; 

interface Props { 
    foo: string; 
} 

class WorkList extends React.Component<Props, {}> { 
    constructor(props: Props) { 
     super(props); 
    } 
    render() { 
     return <h2>WorkList!{this.props.foo} </h2> 
    } 
} 

<WorkList foo="bar" /> 

Qual è il modo corretto di importare un bambino JSX con tipografico 1.6?

ecco il codice di lavoro con la risposta corretta applicata:

// app.tsx 
import * as React from "react"; 
import * as ReactDOM from "react-dom"; 
import WorkList from "./worklist"; 

interface Props { 
    foo: string; 
} 

class App extends React.Component<Props, {}> { 
    constructor(props: Props) { 
     super(props); 
    } 
    public render() { 
     return <WorkList foo="baz"></WorkList> 
    } 
}  
ReactDOM.render(

    React.createElement(App, { foo: 'bar' }), 
    document.getElementById('app') 
); 

//worklist.tsx 
import * as React from "react"; 

interface Props { 
    foo: string; 
} 

export default class WorkList extends React.Component<Props, {}> { 
    constructor(props: Props) { 
     super(props); 
    } 
    render() { 
     return <h2>WorkList!{this.props.foo} </h2> 
    } 
} 

Answer 1

mi aspetto, che è necessario esportare correttamente WorkList classe nel file worklist.tsx, per esempio come l'esportazione di default:

export default class WorkList extend React.Component<Props, {}> 

e quindi importarlo in app.tsx:

import WorkList from "worklist" 

Questo dovrebbe risolvere il problema.