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

emeijp43  于 2023-02-15  发布在  React
关注(0)|答案(3)|浏览(243)

我有一个现有的React组件是用JSX编写的,目前无法转换为Typescript。我想在用Typescript编写的新React应用程序中使用它。我不知道是否可以在TSX代码中导入和使用JSX代码。这可能吗?我该怎么做?
谢谢
下面的示例给出了错误:TS2604:JSX element type 'OldCode' does not have any construct or call signatures.
OldCode.jsx

import React from 'react'

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

NewCode.tsx

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

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

vzgqcmou1#

正在尝试更改您的import语句:

import OldCode from './OldCode';

如果你使用webpack,你可能需要添加.jsx到你的解析器。

5vf7fwbs

5vf7fwbs2#

declare module '*.jsx' {
    var _: React.Component<any, any>;
    export default _;
}

把它当作

import OldCode from './OldCode.jsx';

把这个放到某个文件中,确保它包含在tsconfig.json中。
当然,要确保webpack将它们全部打包。

zz2j4svz

zz2j4svz3#

由于没有可接受的答案,我将链接到我的问题,该问题实际上回答了如何为现有组件编写定义文件(我的问题是关于 Package 在redux连接中的组件):
[How do I create a typescript definition file (d.ts) for an existing redux connected (jsx)component?
希望能帮到什么人...

相关问题