如何从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).

但是,我想将这两个组件拆分为单独的文件.但是,当我取消注释WorkList的导入并从app.tsx中删除WorkList组件的类定义时 - 它失败并显示错误:

错误TS2604 JSX元素类型'WorkList'没有任何构造或调用签名.

这是工作的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在worklist.tsx文件中正确导出类,例如默认导出:

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

然后将其导入app.tsx:

import WorkList from "worklist"

这应该可以解决您的问题.