Question

我有以下app.tsx文件正常工作从React.Component加载App元素和从另一个React.Component（在同一app.tsx文件中定义的两个类）的子Worklist元素。这是在安装了Typescript 1.6的Visual Studio中运行的（ECMAScript版本：ECMAScript 5，JSX编译：React，模块系统：CommonJS）。

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

错误TS2604 JSX元素类型'WorkList'没有任何构造或致电签名。

这是工作的app.tsx和所需的worklist.tsx。

int **j = &i;

使用Typescript 1.6导入子JSX的正确方法是什么？

以下是应用了正确答案的工作代码：

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

Answer 1

我希望您需要在WorkList文件中正确导出worklist.tsx类，例如作为默认导出：

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

然后将其导入app.tsx：

import WorkList from "worklist"

这可以解决您的问题。

如何从Typescript 1.6中的单独文件中正确导入React JSX

1 个答案: