[英]Why do I keep getting "JSX is not defined no-undef"
在我的主页上添加轮播时,我遇到了一个问题。 我收到错误:
“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
所以,对我有用的答案是改变我的.eslintrc.json
{
...
"globals": {
"JSX": "readonly"
}
}
在 ESLint 文档中:
ESLint 的一些核心规则依赖于对代码在运行时可用的全局变量的了解。 由于这些在不同环境之间可能会有很大差异,并且会在运行时进行修改,因此 ESLint 不会假设您的执行环境中存在哪些全局变量。
对于我的项目,一旦定义了这个全局变量,它将默认为node_modules/@types/react
中的JSX
命名空间
在您的Carousel.tsx中,使用如下内容更新您的界面:
interface IProps { children: React.ReactNode }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.