ESLint 样式

外观

@stylistic/

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> 的有效选项 ​

它们是 always、never 和 ignore，用于检查 JSX 属性和子节点。

  • 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 /> />;

替代语法 ​

选项也是 always、never 和 ignore，含义相同。

在此语法中，只提供一个字符串，默认情况下将为该选项设置检查 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 表达式的使用一致性，则应关闭此规则。