为什么我总是收到“JSX 未定义 no-undef”

Question

在向我的主页添加轮播时，我遇到了一个问题。我收到错误：

“JSX”未定义。

我一直在查看 Stack Overflow、GitHub 以及 Google，它们都给出了相对接近的答案，但我不确定我可能做错了什么。

我的 carousel.tsx 文件如下

import * as React from "react";
import styled from "styled-components";

const SCarouselWrapper = styled.div`
  display: flex;
`;

interface IProps {
  children: JSX.Element[];
}

const Carousel = ({ children }: IProps) => {
  const activeSlide = children.map(slide => (
    <>
      {slide}
    </>
  ));

  return (
    <div>
      <SCarouselWrapper>
        {activeSlide}
      </SCarouselWrapper>
    </div>
  );
};

export default Carousel;

我的幻灯片的结构完全相同：

import * as React from "react";
import styled from "styled-components";

const SContainer = styled.div`
  align-items: center;
  display: flex;
`;

const SlideOne = () => (
  <SContainer>
    <img src="../../../../../content/images/logo.jpg" />
  </SContainer>
);

export default SlideOne;

至于我的 .eslintrc.json：

{
  "overrides": [
    {
      "files": ["*.ts"],
      "rules": {
        "no-undef": "off"
      }
    }
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "plugin:react/recommended",
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "prettier",
    "eslint-config-prettier"
  ],
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    },
    "project": "./tsconfig.e2e.json"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "rules": {
    "@typescript-eslint/member-ordering": [
      "error",
      {
        "default": ["static-field", "instance-field", "constructor", "static-method", "instance-method"]
      }
    ],
    "@typescript-eslint/no-parameter-properties": ["warn", { "allows": ["public", "private", "protected"] }],
    "@typescript-eslint/no-unused-vars": "off",
    "@typescript-eslint/explicit-member-accessibility": "off",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/no-unsafe-argument": "off",
    "@typescript-eslint/no-unsafe-return": "off",
    "@typescript-eslint/no-unsafe-member-access": "off",
    "@typescript-eslint/no-unsafe-call": "off",
    "@typescript-eslint/no-unsafe-assignment": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/restrict-template-expressions": "off",
    "@typescript-eslint/restrict-plus-operands": "off",
    "@typescript-eslint/no-floating-promises": "off",
    "@typescript-eslint/ban-types": [
      "error",
      {
        "types": {
          "Object": "Use {} instead."
        }
      }
    ],
    "@typescript-eslint/interface-name-prefix": "off",
    "@typescript-eslint/no-empty-function": "off",
    "@typescript-eslint/unbound-method": "off",
    "@typescript-eslint/array-type": "off",
    "@typescript-eslint/no-shadow": "error",
    "spaced-comment": ["warn", "always"],
    "guard-for-in": "error",
    "no-labels": "error",
    "no-caller": "error",
    "no-bitwise": "error",
    "no-console": ["error", { "allow": ["warn", "error"] }],
    "no-new-wrappers": "error",
    "no-eval": "error",
    "no-new": "error",
    "no-var": "error",
    "radix": "error",
    "eqeqeq": ["error", "always", { "null": "ignore" }],
    "prefer-const": "error",
    "object-shorthand": ["error", "always", { "avoidExplicitReturnArrows": true }],
    "default-case": "error",
    "complexity": ["error", 40],
    "no-invalid-this": "off",
    "react/prop-types": "off",
    "react/display-name": "off",
    "jsx": true
  }
}

我已经尝试了以下列出的内容： 堆栈溢出答案 我也尝试过这个： 官方答案

Answer 1

因此，对我有用的答案是

{ 
  ... 
  "globals": {
     "JSX": "readonly"
  }
}

在 ESLint 文档中更改我的 .eslintrc.json ：

ESLint 的一些核心规则依赖于对代码在运行时可用的全局变量的了解。由于这些变量在不同环境之间可能存在很大差异，并且会在运行时进行修改，因此 ESLint 不会假设您的执行环境中存在哪些全局变量。

对于我的项目，一旦定义了这个全局变量，它将默认为 node_modules/@types/react 中的 JSX 命名空间

Answer 2

在您的 Carousel.tsx 中使用如下内容更新您的界面：

interface IProps {
  children: React.ReactNode
}