← Back to rules

react/jsx-curly-brace-presence 风格

An auto-fix is available for this rule.

它的作用

在仅使用字面量即可满足的情况下，禁止不必要的 JSX 表达式，或在 JSX 子元素或属性中强制要求使用 JSX 表达式。

此规则允许你强制要求或禁止在 JSX 属性和/或子元素中使用花括号。

对于不需要使用 JSX 表达式的情况，请参阅 React 文档 和 关于 JSX 常见陷阱的页面。

为什么这是不好的？

在你的 JSX 代码中使用不同的样式会使代码更难阅读且不够一致。

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

规则详情

默认情况下，该规则会检查并警告在 JSX 属性和子元素中出现的不必要的花括号。为了保持向后兼容性，默认情况下不会将 JSX 元素作为属性值进行考虑。

你可以传入选项，以强制在以下情况中使用花括号：

• JSX 属性
• 子元素
• 作为 JSX 元素的属性值
• 或以上三种情况的任意组合

同样地，也提供不允许多余花括号的选项，以及忽略检查的选项。

注意：强烈建议你将此规则配置为对象形式，并将 "propElementValues" 设置为 "always"。省略作为 JSX 元素的属性值的花括号这一功能非常隐蔽，且故意未被记录，不应依赖它。

示例配置

{
  "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 表达式），或对子元素也进行相同处理，但同时使用双引号。

• never：从 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>

• 如果规则设置为强制使用花括号，且字符串中包含引号，则会使用双引号修复子元素，而属性则按常规方式处理。此外，修复过程中双引号会被转义。

例如：

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

将被警告并修复为：

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

• 如果规则设置为移除不必要的花括号（即去除不必要的表达式），且其对应的 JSX 形式需要转义字符（如引号字符）、被禁止的 JSX 文本字符、已转义的字符，或任何看起来像 HTML 实体名称的内容，则不会发出警告，因为修复可能导致代码可读性降低。

以下为 正确 的代码示例，即使配置为 "never" 也是如此：

<Color text={"\u00a0"} />
<App>{"Hello \u00b7 world"}</App>;
<style type="text/css">{'.main { margin-top: 0; }'}</style>;
/**
 * 由于无法在无容器的情况下注入空格，因此这始终是允许的。
 */
<App>{' '}</App>
<App>{'     '}</App>
<App>{/* comment */ <Bpp />}</App> // 注释使容器成为必需

不应使用它的场景

如果你不关心维护关于在 JSX 属性和/或子元素中使用花括号的一致性，以及避免不必要的 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 时，允许（或强制）以下代码：
<App prop=<div /> />;

当设置为 always 时，对于属性值为 JSX 元素的情况，必须使用花括号：
<App prop={<div />} />;

注意：强烈建议将 propElementValues 设置为 always。省略作为 JSX 元素的属性值的花括号这一功能非常隐蔽，且故意未被记录，不应依赖它。

props

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

default: "never"

是否对 JSX 元素的属性强制或禁止使用花括号。

• never 将禁止不必要的花括号，例如：<Foo foo="bar" /> 是首选。
• always 将在所有情况下强制使用花括号，例如：<Foo foo={'bar'} />。
• ignore 将允许属性值使用任一风格。

如何使用

要通过配置文件或 CLI 启用此规则，可以使用：

配置文件 (.oxlintrc.json)

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

CLI

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

参考资料

• 规则源码