时间戳

首页 > 解决方案 > Visual Studio 代码中的 React.Fragment 错误

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

问题描述

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

如何禁用或修复此问题？

这是一个电子反应项目，带有打字稿。我开始了这个项目

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

然后我将我react的 ,@types/react和package 更新为最新版本，因为我需要该组件。Fragment 是 React 16.xx 引入的新特性@types/react-domreact-dom<Fragment>

这是我当前的 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)

Visual Studio 代码中的错误

附加说明：当我Fragment作为单独的变量导入时：

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

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

标签： reactjsvisual-studio-codeelectroneslint

解决方案

我还在 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

推荐阅读