reactjs typescript -React组件中出现“找不到名称”错误

5gfr0r5j  于 2023-01-17  发布在  React
关注(0)|答案(4)|浏览(698)

我正在将现有的React代码迁移到TypeScript,遇到了很多问题,其中之一是当我创建.js文件.ts文件时出现了很多"找不到名称"错误。
下面是所讨论的代码:

import React from 'react';

const Footer = ({ children, inModal }) => (
    <footer className={'tableBottomPanel' + (inModal ? " in-modal" : "") }>
        <div>
            {children}
        </div>
    </footer>
);

export default Footer;

<footer></footer>的五行带有红色下划线,并根据我将鼠标悬停的位置给出各种错误,例如:

  • 找不到名称"页脚"。
  • 应为"〉"
  • 找不到名称"div"
  • 未终止的正则表达式文本
  • 运算符"〈"不能应用于类型"boolean"和"RegExp"

下面是我的tsconfig.json文件:

{
    "compilerOptions": {
        "outDir": "./dist/", // path to output directory
        "sourceMap": true, // allow sourcemap support
        "strictNullChecks": true, // enable strict null checks as a best practice
        "module": "es6", // specify module code generation
        "jsx": "react", // use typescript to transpile jsx to js
        "target": "es5", // specify ECMAScript target version
        "allowJs": true, // allow a partial TypeScript and JavaScript codebase
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true,
        "lib": [
            "es6",
            "dom"
        ],
        "types": [
            "node"
        ]
    },
    "include": [
        "./src/"
    ]
}

我是令人难以置信的困惑,并将非常感谢一些帮助!

xienkqul

xienkqul1#

Typescript不希望在Typescript文件中看到JSX。解决此问题的最简单方法是将文件从.ts重命名为.tsx
JSX in Typescript Documentation

vlf7wbxs

vlf7wbxs2#

我也遇到过同样的问题。这可能是由于您使用的.ts文件的扩展名不允许在它的JSX代码。相反,您应该使用.tsx扩展名。

thtygnil

thtygnil3#

我在一个没有扩展名的文件中遇到了这个错误。它只是没有扩展名的filename,所以VSCode假设它是TS。当我将文件重命名为filename.js时,错误消失了。
不过,如果您希望文件是在 typescript ,并不希望错误,接受的答案(filename.tsx)是正确的方法.

z4iuyo4d

z4iuyo4d4#

为了防止其他人遇到这种情况。我使用StencilJS,它使用react类的tsx文件,但没有react。我的问题是我在vscode中加载了SRC目录。纠正措施是加载SRC目录的父目录,该目录具有适当的config.ts、tsconfig.json等。这使它能够正确识别tsx文件。

相关问题