为什么我一直收到 "JSX is not defined no-undef"

Question

在我的主页上添加轮播时，我运行遇到了问题。我收到错误：

'JSX' is not defined.

我一直在查看 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
  }
}

我已经尝试过以下列出的内容：回答我也试过这个： Official 回答

Answer 1

在您的 Carousel.tsx 中更新您的界面，如下所示：

interface IProps {
  children: React.ReactNode
}

Answer 2

所以，对我有用的答案正在改变我的 .eslintrc.json

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

在 ESLint 文档中：

Some of ESLint's core rules rely on knowledge of the global variables available to your code at runtime. Since these can vary greatly between different environments as well as be modified at runtime, ESLint makes no assumptions about what global variables exist in your execution environment.

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

中的 JSX 命名空间

为什么我一直收到 "JSX is not defined no-undef"

Why do I keep getting "JSX is not defined no-undef"

javascript

reactjs

typescript

eslint

jhipster