Tslint:没有子级的JSX元素必须是自动关闭的[错误] [英] Tslint: JSX elements with no children must be self closing [Error]

问题描述

因此，我一直在寻找解决此问题的方法.由于出现错误，我的解决方案无法通过命令npm run build构建:

So I've been searching for a solution to this issue. My solution will not build via the command npm run build as I have the error:

没有子元素的JSX元素必须是自动关闭的.

JSX elements with no children must be self-closing.

这里有一个类似的问题，没有被接受(或无法正常工作)的答案:

There is a similar issue here with no accepted (or working) answers: JSX elements with no children must be self-closing

关联的Typescript/HTML的格式为:

class ExampleClass { 
    render() {
           return <div>
               <div> 
                   <div>Content 1</div>
                   <div>Content 2</div>
                   <div>Content 3</div>
              </div>
          </div>;
      }
}
export default ExampleClass;

错误"发生在第5行，即:

The "error" occurs on line 5 which is:

<div>Content 1</div>

我正在使用 Tslint ，并且Tslint的许多功能已经更改/正在运行在文件tslint.json中.

I'm using Tslint and have a number of the features of Tslint already changed / working in the file tslint.json.

查看当前的tslint.json文件:

{
  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
  "linterOptions": {
    "exclude": [
      "gulpfile.js",
      "bin/**",
      "wwwroot/**",
      "config/**/*.js",
      "node_modules/**"
    ]
  },
  "rules": {
    "prefer-const": false,
    "triple-equals": false,
    "jsx-no-lambda": false,
    "object-literal-shorthand": false,
    "no-shadowed-variable": false,
    "ban-types": false,
    "one-variable-per-declaration": false,
    "callable-types": false,
    "quotemark": [ false, "single", "jsx-double" ],
    "indent": [ true, "spaces", 2 ],
    "interface-name": false,
    "ordered-imports": false,
    "object-literal-sort-keys": false,
    "no-consecutive-blank-lines": false,
    "comment-format": false,
    "no-trailing-whitespace": false,
    "one-line": false,
    "max-classes-per-file": false,
    "jsx-boolean-value": false,
    "no-empty-interface": false,
    "variable-name": [ true, "allow-pascal-case", "allow-snake-case" ],
    "no-console": false,
    "interface-over-type-literal": false
  }
}

这是我尝试过的各种方法(连续，并非一次完成)-没有成功:

Here are the various things I've tried (consecutively, not all at once) - with no success:

"prefer-const": [
      true,
      { "destructuring": "all" }
    ],
"react/self-closing-comp": "off",
"react/self-closing-comp": false,
"no-trailing-whitespace":  false

可以在此处找到Tslint的规则: TSLint核心规则

The rules for Tslint can be found here: TSLint core rules

我不想要做的是:

• 完全禁用TSLint
• 除非完全必要，否则请修改我的HTML结构

我要寻找的是用于抑制此错误的正确的Tslint规则.
例如"react/self-closing-comp": false.

希望那里的某人早于&可以帮我！

Hopefully someone out there has seen this before & can give me a hand!

非常感谢！

推荐答案

根据 npmjs. com (截至2020年1月20日):

According to the npmjs.com as of the 20/01/2020:

不推荐使用TSLint，而推荐使用ESLint.请参阅 https://github.com/palantir/tslint-react/issues/210 了解更多信息.

您可以配置现有的TSLint解决方案以使用ESLint中的新规则，方法如下:

You can configure your existing TSLint solution to use the new rules from ESLint, this is done like so:

1. 根据 npmjs.com ，使用npm命令安装ESLint: npm install eslint --save-dev
2. 根据 npmjs.com ，通过运行以下命令:npm install --save-dev tslint-eslint-rules
3. 通过添加extends属性来修改tslint.json文件，如下所示:"extends": [ "tslint-eslint-rules"]

1. According to npmjs.com, install ESLint with the npm command: npm install eslint --save-dev
2. According to npmjs.com, allow the ESLint rules by running the following command: npm install --save-dev tslint-eslint-rules
3. Modify your tslint.json file by adding an extends property, like so: "extends": [ "tslint-eslint-rules"]

可在此处找到大量相关的ESLint规则: ESLint规则-npmjs.com 和此处 ESLint规则-eslint.org

A good number of relevant ESLint rules are found here: ESLint Rules - npmjs.com and here ESLint Rules - eslint.org

解决错误的相关规则:

没有子元素的JSX元素必须是自动关闭的.

JSX elements with no children must be self-closing.

是这个:

 "jsx-self-close": false

我最终的tslint.json文件如下所示:

My final tslint.json file looked like this:

{
  "extends": [ "tslint-eslint-rules", "tslint:latest", "tslint-react", "tslint-config-prettier" ],
  "linterOptions": {
    "exclude": [
      "gulpfile.js",
      "bin/**",
      "wwwroot/**",
      "config/**/*.js",
      "node_modules/**"
    ]
  },
  "rules": {
    "jsx-self-close": false,
    "jsx-wrap-multiline": false,
    "no-constant-condition": true,
    "no-unused-expression": false,
    "no-unused-variable": false,
    "no-string-throw": false,
    "prefer-const": false,
    "triple-equals": false,
    "jsx-no-lambda": false,
    "object-literal-shorthand": false,
    "no-shadowed-variable": false,
    "ban-types": false,
    "one-variable-per-declaration": false,
    "callable-types": false,
    "quotemark": [ false, "single", "jsx-double" ],
    "indent": [ true, "spaces", 2 ],
    "interface-name": false,
    "ordered-imports": false,
    "object-literal-sort-keys": false,
    "no-consecutive-blank-lines": false,
    "comment-format": false,
    "no-trailing-whitespace": false,
    "one-line": false,
    "max-classes-per-file": false,
    "jsx-boolean-value": false,
    "no-empty-interface": false,
    "variable-name": false,
    "no-console": false,
    "interface-over-type-literal": false,
    "no-conditional-assignment": false,
    "only-arrow-functions": false,
    "no-var-keyword": false,
    "no-empty": false,
    "no-submodule-imports": false,
    "no-duplicate-imports": false,
    "no-useless-rename": false,
    "no-implicit-dependencies": false,
    "no-return-await": false,
    "no-object-literal-type-assertion": false,
    "prefer-object-spread": false,
    "prefer-conditional-expression": false,
    "jsdoc-format": false,
    "prefer-for-of": false,
    "radix": false
  }
}

希望这可以节省一些时间！

Hopefully this saves someone some time!

这篇关于Tslint:没有子级的JSX元素必须是自动关闭的[错误]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！