← Back to rules

react/jsx-curly-brace-presence Style

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

它的作用

当仅使用字面量就足够时，禁止不必要的 JSX 表达式；或者在 JSX 子元素或属性中的字面量上强制使用 JSX 表达式。

此规则允许你强制使用大括号，或者禁止在 JSX props 和/或子元素中使用不必要的大括号。

对于 JSX 表达式不必要的情况，请参阅 React 文档 以及这篇关于 JSX 陷阱的页面。

为什么这不好？

在 JSX 代码中使用不同的风格会让它更难阅读， 也不够一致。

代码一致性可以提升可读性。通过强制或禁止在 JSX props 和/或子元素中使用大括号，此规则有助于在你的应用中保持一致的模式。

规则详情

默认情况下，此规则会检查并警告 JSX props 和子元素中不必要的大括号。出于向后兼容的考虑，默认不会考虑 JSX 元素类型的 prop 值。

你可以传入选项，强制 JSX props、子元素、作为 JSX 元素的 JSX prop 值，或者这三者的任意组合中使用大括号。对于禁止不必要的大括号以及忽略检查，同样提供了相同的选项。

注意：强烈建议你使用对象来配置此规则，并将 "propElementValues" 设置为 "always"。允许省略 JSX 元素类型 prop 值周围大括号的能力非常隐晦，而且是刻意不文档化的，不应依赖它。

配置示例

{
  "rules": {
    "react/jsx-curly-brace-presence": ["error", { "props": <string>, "children": <string>, "propElementValues": <string> }]
  }
}

或者也可以

{
  "rules": {
    "react/jsx-curly-brace-presence": ["error", "always"], // 或 "never" 或 "ignore"
  },
}

修复详情

如果传入了用于修复的选项，样式违规将按以下方式修复

• always：将 JSX 属性用大括号/JSX 表达式包裹，并且/或者以相同方式处理 JSX 子元素，但也会使用双引号

• never：去掉 JSX 属性和/或者 JSX 子元素中的大括号

• 所有修复操作都使用双引号。

示例

以下是此规则配置为 { props: "always", children: "always" } 时，错误代码的示例：

<App>Hello world</App>;
<App prop="Hello world">{"Hello world"}</App>;

它们可以被修复为：

<App>{"Hello world"}</App>;
<App prop={"Hello world"}>{"Hello world"}</App>;

以下是此规则配置为 { props: "never", children: "never" } 时，错误代码的示例：

<App>{"Hello world"}</App>;
<App prop={"Hello world"} attr={"foo"} />;

它们可以被修复为：

<App>Hello world</App>;
<App prop="Hello world" attr="foo" />;

以下是此规则配置为 { props: "always", children: "always", "propElementValues": "always" } 时，错误代码的示例：

<App prop=<div /> />

它们可以被修复为：

<App prop={<div />} />

以下是此规则配置为 { props: "never", children: "never", "propElementValues": "never" } 时，错误代码的示例：

<App prop={<div />} />

它们可以被修复为：

<App prop=<div /> />

以下是此规则配置为 "always" 时，错误代码的示例：

<App>Hello world</App>;
<App prop="Hello world" attr="foo">
  Hello world
</App>;

它们可以被修复为：

<App>{"Hello world"}</App>;
<App prop={"Hello world"} attr={"foo"}>
  {"Hello world"}
</App>;

以下是此规则配置为 "never" 时，错误代码的示例：

<App prop={"foo"} attr={"bar"}>
  {"Hello world"}
</App>

它可以被修复为：

<App prop="foo" attr="bar">
  Hello world
</App>

边界情况

修复也会处理模板字面量、带引号的字符串，以及带转义字符的字符串。

• 如果规则设置为去掉不必要的大括号，而 JSX 表达式中的模板字面量没有表达式，它会发出警告并使用双引号修复。例如：

<App prop={`Hello world`}>{`Hello world`}</App>

会被警告并修复为：

<App prop="Hello world">Hello world</App>

• 如果规则设置为强制使用大括号，并且字符串中包含引号，JSX 子元素会使用双引号修复，而 JSX 属性会按常规方式修复。另外，在修复中，双引号也会被转义。

例如：

<App prop='Hello "foo" world'>Hello 'foo' "bar" world</App>

会被警告并修复为：

<App prop={'Hello "foo" world'}>{"Hello 'foo' \"bar\" world"}</App>

• 如果规则设置为去掉不必要的大括号（JSX 表达式），而其 JSX 形式中存在需要转义的字符，例如引号字符、禁止的 JSX 文本字符、转义字符以及任何看起来像 HTML 实体名称的内容，代码将不会被警告，因为修复可能会降低代码的可读性。

以下是此规则配置为 "never" 时，正确代码的示例：

<Color text={"\u00a0"} />
<App>{"Hello \u00b7 world"}</App>;
<style type="text/css">{'.main { margin-top: 0; }'}</style>;
/**
 * 无法在没有容器的情况下将空白注入 jsx，因此这
 * 始终是允许的。
 */
<App>{' '}</App>
<App>{'     '}</App>
<App>{/* 注释使容器变得必要 */ <Bpp />}</App>

何时不使用

如果你不关心在 JSX props 和/或子元素中保持大括号使用的一致性，以及不必要的 JSX 表达式的使用，就应该关闭此规则。

配置

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

children

type: "always" | "never" | "ignore"

default: "never"

是否对 JSX 元素的子内容强制使用或禁止大括号。

• never 将禁止不必要的大括号，例如以下写法会被优先采用：<Foo>I love oxlint</Foo>
• always 将在所有情况下强制使用大括号，例如：<Foo>{'I love oxlint'}</Foo>
• ignore 将允许子内容使用任意一种风格。

propElementValues

type: "always" | "never" | "ignore"

default: "ignore"

当设置为 ignore 或 never 时，允许（或强制）以下 JSX 代码： <App prop=<div /> />;

当设置为 always 时，JSX 元素类型的 prop 值必须使用大括号：<App prop={<div />} />;

注意：强烈建议你将 propElementValues 设置为 always。 允许省略 JSX 元素类型 prop 值周围大括号的能力非常隐晦，而且是刻意不文档化的，不应依赖它。

props

type: "always" | "never" | "ignore"

default: "never"

是否对 JSX 元素上的 props 强制使用或禁止大括号。

• never 将禁止不必要的大括号，例如以下写法会被优先采用：<Foo foo="bar" />
• always 将在所有情况下强制使用大括号，例如：<Foo foo={'bar'} />
• ignore 将允许 prop 值使用任意一种风格。

如何使用

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

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/jsx-curly-brace-presence": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/jsx-curly-brace-presence": "error",
  },
});

CLI

oxlint --deny react/jsx-curly-brace-presence --react-plugin

版本

此规则在 v0.7.0 中加入。

参考资料

• Rule Source
• Open rule in Oxc Playground