jsx-curly-brace-presence
当仅使用字面量就足够时,禁止不必要的 JSX 表达式,或者在 JSX 子元素或属性中强制对字面量使用 JSX 表达式。
对于不需要 JSX 表达式的情况,请参考 React 文档 和 关于 JSX 陷阱的页面。
规则详细信息
默认情况下,此规则将检查并警告 JSX 属性和子元素中不必要的括号。为了向后兼容,默认情况下,作为 JSX 元素的属性值不会被考虑。
您可以传递选项来强制在 JSX 属性、子元素、作为 JSX 元素的 JSX 属性值或这三者的任何组合上使用括号。相同的选项可用于不允许不必要的括号以及忽略检查。
注意:强烈建议您使用对象配置此规则,并将 "propElementValues" 设置为 "always"。省略围绕作为 JSX 元素的属性值的括号的能力是模糊的,并且有意没有记录,不应该依赖它。
规则选项
...
"@stylistic/jsx/jsx-curly-brace-presence": [<enabled>, { "props": <string>, "children": <string>, "propElementValues": <string> }]
...
或者
...
"@stylistic/jsx/jsx-curly-brace-presence": [<enabled>, <string>]
...
<string>
的有效选项
对于检查 JSX 属性和子元素,它们分别是 always
、never
和 ignore
。
always
:始终在 JSX 属性、子元素和/或作为 JSX 元素的 JSX 属性值中强制使用花括号never
:永远不允许在 JSX 属性、子元素和/或作为 JSX 元素的 JSX 属性值中使用不必要的括号ignore
:忽略 JSX 属性、子元素和/或作为 JSX 元素的 JSX 属性值的规则
如果在修复选项中传递,则以下是如何修复样式违规
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
、never
和 ignore
,含义相同。
在这种语法中,只提供一个字符串,默认值将设置为该选项,用于检查 JSX 属性和子元素。
例如
当配置为 "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>;
/**
* 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 表达式的使用一致性,则应关闭此规则。