跳至内容

@stylistic/jsx/

jsx-curly-brace-presence

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

对于不需要 JSX 表达式的情况,请参考 React 文档关于 JSX 陷阱的页面

规则详细信息

默认情况下,此规则将检查并警告 JSX 属性和子元素中不必要的括号。为了向后兼容,默认情况下,作为 JSX 元素的属性值不会被考虑。

您可以传递选项来强制在 JSX 属性、子元素、作为 JSX 元素的 JSX 属性值或这三者的任何组合上使用括号。相同的选项可用于不允许不必要的括号以及忽略检查。

注意强烈建议您使用对象配置此规则,并将 "propElementValues" 设置为 "always"。省略围绕作为 JSX 元素的属性值的括号的能力是模糊的,并且有意没有记录,不应该依赖它。

规则选项

js
...
"@stylistic/jsx/jsx-curly-brace-presence": [<enabled>, { "props": <string>, "children": <string>, "propElementValues": <string> }]
...

或者

js
...
"@stylistic/jsx/jsx-curly-brace-presence": [<enabled>, <string>]
...

<string> 的有效选项

对于检查 JSX 属性和子元素,它们分别是 alwaysneverignore

  • always:始终在 JSX 属性、子元素和/或作为 JSX 元素的 JSX 属性值中强制使用花括号
  • never:永远不允许在 JSX 属性、子元素和/或作为 JSX 元素的 JSX 属性值中使用不必要的括号
  • ignore:忽略 JSX 属性、子元素和/或作为 JSX 元素的 JSX 属性值的规则

如果在修复选项中传递,则以下是如何修复样式违规

  • always:将 JSX 属性包装在花括号/JSX 表达式中,或以相同的方式包装 JSX 子元素,但也要使用双引号

  • never:从 JSX 属性和/或 JSX 子元素中删除花括号

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

例如

当配置为 { props: "always", children: "always" } 时,此规则的不正确代码示例

jsx
<App>Hello world</App>;
<App prop='Hello world'>{'Hello world'}</App>;

它们可以修复为

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

当配置为 { props: "never", children: "never" } 时,此规则的不正确代码示例

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

它们可以修复为

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

当配置为 { props: "always", children: "always", "propElementValues": "always" } 时,此规则的不正确代码示例

jsx
<App prop=<div /> />;

它们可以修复为

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

当配置为 { props: "never", children: "never", "propElementValues": "never" } 时,此规则的不正确代码示例

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

它们可以修复为

jsx
<App prop=<div /> />;

替代语法

这些选项也是 alwaysneverignore,含义相同。

在这种语法中,只提供一个字符串,默认值将设置为该选项,用于检查 JSX 属性和子元素。

例如

当配置为 "always" 时,此规则的不正确代码示例

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

它们可以修复为

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

当配置为 "never" 时,此规则的不正确代码示例

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

它可以修复为

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

边缘情况

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

  • 如果规则设置为去除不必要的括号,并且 JSX 表达式中的模板字面量没有表达式,它将抛出警告并用双引号修复。例如
jsx
<App prop={`Hello world`}>{`Hello world`}</App>;

将被警告并修复为

jsx
<App prop="Hello world">Hello world</App>;
  • 如果规则设置为强制使用括号,并且字符串带有引号,它将使用双引号修复 JSX 子元素,并使用正常方式修复 JSX 属性。此外,双引号将在修复中被转义。

例如

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

将被警告并修复为

jsx
<App prop={"Hello \"foo\" world"}>{"Hello 'foo' \"bar\" world"}</App>;
  • 如果规则设置为去除不必要的括号(JSX 表达式),并且其 JSX 形式中存在需要转义的字符,例如引号字符、禁止的 JSX 文本字符、转义字符以及任何看起来像 HTML 实体名称的字符,代码将不会被警告,因为修复可能会使代码可读性降低。

即使配置为 "never",此规则的正确代码示例

jsx
<Color text={"\u00a0"} />
<App>{"Hello \u00b7 world"}</App>;
<style type="text/css">{'.main { margin-top: 0; }'}</style>;
/**
 * there's no way to inject a whitespace into jsx without a container so this
 * will always be allowed.
 */
<App>{' '}</App>
<App>{'     '}</App>
<App>{/* comment */ <Bpp />}</App> // the comment makes the container necessary

何时不使用它

如果您不关心维护关于在 JSX 属性和/或子元素中使用括号以及使用不必要的 JSX 表达式的使用一致性,则应关闭此规则。