為什么我不斷收到“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
  }
}

我已經嘗試過以下列出的內容： Stack Overflow answer 我也嘗試過這個： Official answer

Answer 1

所以，對我有用的答案是改變我的.eslintrc.json

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

在 ESLint 文檔中：

ESLint 的一些核心規則依賴於對代碼在運行時可用的全局變量的了解。 由於這些在不同環境之間可能會有很大差異，並且會在運行時進行修改，因此 ESLint 不會假設您的執行環境中存在哪些全局變量。

對於我的項目，一旦定義了這個全局變量，它將默認為node_modules/@types/react中的JSX命名空間

Answer 2

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

 interface IProps { children: React.ReactNode }