如何在 Typescript 模块 (.tsx) 中导入 JSX 中定义的现有 React 组件

Question

我有一个用 JSX 编码的现有 React 组件，目前我无法转换为 Typescript。我想在用 Typescript 编写的新 React 应用程序中使用它。我不知道是否可以在 TSX 代码中导入和使用 JSX 代码。这可能吗？我该怎么做？

谢谢

下面的例子给出了错误： TS2604:JSX element type 'OldCode' does not have any construct or call signatures.

旧代码.jsx

import React from 'react'

export default React.createClass({
  render() {
    return <div>OldCode</div>
  }
})

新代码.tsx

import * as React from 'react';
import { OldCode } from './OldCode';

export default class NewCode extends React.Component<any, any> {
  render() {
    return (
      <OldCode/>
    );
  }
}

Answer 1

尝试更改您的导入声明：

import OldCode from './OldCode';

如果您使用 webpack，您可能还需要将 .jsx 添加到您的解析器中。