如何從Typescript 1.6中的單獨文件正確導入React JSX

Question

我有以下app.tsx文件，可以正常加載來自React.Component的App元素和來自另一個React.Component的子Worklist元素（這兩個類都定義在相同的app.tsx文件）。這是在安裝了Typescript 1.6的Visual Studio中運行的（ECMAScript版本：ECMAScript 5，JSX編譯：React，模塊系統：CommonJS）。

但是，我想將這兩個組件分成單獨的文件。然而，當我取消工作表的導入和去除從app.tsx工作列表組件的類定義 - 它失敗的錯誤：

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

這裏是app.tsx工作和所需worklist.tsx。

// 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" /> 

用Typescript 1.6導入子JSX的正確方法是什麼？

這裏是工作的代碼與正確答案適用於：

// 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

我希望，你需要正確地導出在worklist.tsx文件WorkList類，例如作爲默認的導出：

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

，然後導入它在app.tsx：

import WorkList from "worklist" 

這應該解決您的問題。