使用 Typescript 时无法从单独的文件导入 React JSX

Question

问题类似于。

当所有代码都在一个文件中时，它工作正常。但是当我将组件放入不同的文件并尝试导入时，打字稿编译器会出错。

代码看起来不错。

我得到的错误是

JSX element type 'Hello' does not have any construct or call signatures.

app.tsx

/// <reference path="typings/tsd.d.ts" />
import React = require('react');
import ReactDOM = require('react-dom');
import $ = require('jquery');
import Hello = require('./components/Hello');

$(()=>{
    ReactDOM.render(<Hello name="Tom" />,document.body);
});

components/Hello.tsx

/// <reference path="../typings/tsd.d.ts" />
import React = require('react');

export default class Hello extends React.Component<any,any>{
    render(){
        return <div className="hello">Hello {this.props.name} !</div>;
    }
}

tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "jsx": "react"
    }
}

Answer 1

如果你写了这些行

export default class Hello ...
/* and */    
import Hello = require('./components/Hello');

然后你需要写这个来消费它：

<Hello.Hello name="Tom" />

您可以这样写，以更改模块以将 class 导出为其顶级对象：

class Hello ...
export = Hello

或您可以使用解构从模块导入 Hello 导出：

import { Hello } from './components/Hello';

或您可以从模块中导入 default 导出：

import Hello from './components/Hello';

使用 Typescript 时无法从单独的文件导入 React JSX

Cannot import React JSX from separate file while using Typescript

javascript

jsx

typescript

reactjs

react-jsx