小编ble*_*404的帖子

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

我有以下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') …
Run Code Online (Sandbox Code Playgroud)

typescript reactjs react-jsx typescript1.6

9
推荐指数
1
解决办法
9516
查看次数

标签 统计

react-jsx ×1

reactjs ×1

typescript ×1

typescript1.6 ×1