← Back to rules

react/self-closing-comp Style

🛠️ An auto-fix is available for this rule.

作用

检测没有子元素的组件，以便将其自闭合，避免 不必要的额外闭合标签。

为什么这不好？

没有子元素的组件不需要显式的闭合标签。使用 自闭合语法可以让代码更简洁，并减少视觉杂乱。 这也符合空元素常见的 React 和 JSX 约定。

包含空白符的自闭合组件是允许的，除非 它同时包含换行符。

示例

以下是此规则的错误代码示例：

const elem = <Component linter="oxlint"></Component>;
const dom_elem = <div id="oxlint"></div>;
const welem = <div id="oxlint"></div>;

以下是此规则的正确代码示例：

const elem = <Component linter="oxlint" />;
const welem = <Component linter="oxlint"> </Component>;
const dom_elem = <div id="oxlint" />;

配置

此规则接受一个包含以下属性的配置对象：

component

type: boolean

default: true

是否强制自定义组件使用自闭合形式。

html

type: boolean

default: true

是否强制原生 HTML 元素使用自闭合形式。

如何使用

To enable this rule using the config file or in the CLI, you can use:

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/self-closing-comp": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/self-closing-comp": "error",
  },
});

CLI

oxlint --deny react/self-closing-comp --react-plugin

版本

此规则于 v0.9.3 中添加。

参考

• Rule Source
• Open rule in Oxc Playground