← Back to rules

react/jsx-no-useless-fragment Pedantic

💡 A suggestion is available for this rule.

它的作用

禁止无用的 Fragment。

为什么这不好？

当你需要将多个子元素分组，而又不想在 DOM 树中添加一个节点时，Fragment 是一个非常有用的工具。然而，有时你可能会得到一个只包含单个子元素的 Fragment。当这个子元素是一个元素、字符串或表达式时，就没有必要使用 Fragment。

示例

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

<>foo</>
<div><>foo</></div>

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

<>foo <div></div></>
<div>foo</div>

配置

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

allowExpressions

type: boolean

default: false

允许包含单个表达式子元素的 Fragment。

如何使用

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

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/jsx-no-useless-fragment": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/jsx-no-useless-fragment": "error",
  },
});

CLI

oxlint --deny react/jsx-no-useless-fragment --react-plugin

版本

此规则在 v0.0.14 中添加。

参考资料

• Rule Source
• Open rule in Oxc Playground