reactjs - Visual Studio代码中的React.Fragment错误

Question

即使工作正常，Visual Studio Code仍会显示错误，如下面的屏幕截图所示。 AFAIK，我的ESLint似乎不太了解React.Fragment。它对我拥有的任何<React.Fragment>或<Fragment>显示错误。

如何禁用或修复此问题？

这是一个 Electron react 项目，带有 typescript 。我开始与这个项目

electron-forge init my-new-project --template=react-typescript

然后我将 react， @types/react， @types/react-dom和 react-dom软件包更新为最新版本，因为我需要 <Fragment>组件。片段是React 16.x.x引入的新功能

这是我当前的package.json:

"dependencies": {
    "@fortawesome/fontawesome-free": "^5.7.2",
    "@types/prop-types": "^15.7.1",
    "@types/react": "^16.8.17",
    "@types/react-dom": "^16.8.4",
    "electron-compile": "^6.4.4",
    "electron-devtools-installer": "^2.2.4",
    "electron-squirrel-startup": "^1.0.0",
    "electron-stylus": "^0.1.1",
    "ionicons": "^4.5.5",
    "moment": "^2.24.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-hot-loader": "^3.1.3",
    "tslib": "^1.9.3"
  },
  "devDependencies": {
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "electron": "^5.0.1",
    "electron-forge": "^5.2.4",
    "electron-prebuilt-compile": "4.0.0",
    "tslint": "^5.16.0",
    "typescript": "^2.2.2"
  }

我在Debian机器64位，ESLint 1.8.2上使用VSCode 1.33.1

错误代码:

JSX element type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | null' is not a constructor function for JSX elements.
  Type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>' is not assignable to type 'Element'.
    Types of property 'type' are incompatible.
      Type 'string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)' is not assignable to type 'string | ComponentClass<any> | StatelessComponent<any>'.
        Type '(props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null' is not assignable to type 'string | ComponentClass<any> | StatelessComponent<any>'.
          Type '(props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null' is not assignable to type 'StatelessComponent<any>'.
            Type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | null' is not assignable to type 'ReactElement<any>'.
              Type 'null' is not assignable to type 'ReactElement<any>'.ts(2605)

附加说明:
当我使用以下命令将 Fragment导入为单独的变量时:

import * as React from "react";
import { Fragment } from 'react' 

然后尝试调用 <Fragment>组件，它仍然抛出相同的错误

Answer 1

我还在 Electron 应用程序中使用React。通过在后台设置Babel和Webpack进行编译。

我写了一篇有关当前正在使用的堆栈以及如何解决语法突出显示问题的文章。

注意，就像我认为您提到的那样，我的应用程序实际上是在Webpack/Babel中正确编译的。只是Visual Studio Code产生了问题。

简而言之，将VSC中的语言从Javascript更改为Typescript可以固定突出显示。

这是我的文章:https://medium.com/@callback.insanity/using-react-fragments-in-visual-studio-code-2019-d19af4469788