react/jsx-curly-brace-presence 样式
在字面量足够的情况下，禁止不必要的 JSX 表达式
禁止在 JSX 子元素或属性中使用不必要的 JSX 表达式，或强制在 JSX 子元素或属性的字面量上使用 JSX 表达式 (react/jsx-curly-brace-presence)
🔧 This rule is automatically fixable by the [`--fix` CLI option](https://oxc-project.github.io/docs/guide/usage/linter/cli.html#fix-problems).
此规则允许您在 JSX 属性和/或子元素中强制使用大括号或禁止不必要的大括号。
对于 JSX 表达式不必要的情况，请参考 React 文档 和 关于 JSX 陷阱的页面。
## Rule Details
默认情况下，此规则将检查并警告 JSX 属性和子元素中不必要的大括号。为了向后兼容，默认情况下不考虑 JSX 元素的属性值。
您可以传入选项以强制在 JSX 属性、子元素、JSX 元素的属性值或三者的任意组合上使用大括号。同样的选项也可用于不允许不必要的大括号以及忽略检查。
**注意**：*强烈建议*您使用对象配置此规则，并将“propElementValues”设置为“always”。省略 JSX 元素的属性值周围的大括号的能力是晦涩难懂的，并且有意未记录在案，不应依赖。
## Rule Options
```js
...
"react/jsx-curly-brace-presence": [<enabled>, { "props": <string>, "children": <string>, "propElementValues": <string> }]
...
```
or alternatively
```js
...
"react/jsx-curly-brace-presence": [<enabled>, <string>]
...
```
### Valid options for `<string>`
对于检查 JSX 属性和子元素，它们是 always、never 和 ignore。
- `always`: always enforce curly braces inside JSX props, children, and/or JSX prop values that are JSX Elements
- `never`: never allow unnecessary curly braces inside JSX props, children, and/or JSX prop values that are JSX Elements
- `ignore`: ignore the rule for JSX props, children, and/or JSX prop values that are JSX Elements
If passed in the option to fix, this is how a style violation will get fixed
- `always`: wrap a JSX attribute in curly braces/JSX expression and/or a JSX child the same way but also with double quotes
- `never`: get rid of curly braces from a JSX attribute and/or a JSX child
- All fixing operations use double quotes.
For examples:
Examples of **incorrect** code for this rule, when configured with `{ props: "always", children: "always" }`:
```jsx
<App>Hello world</App>;
<App prop='Hello world'>{'Hello world'}</App>;
```
They can be fixed to:
```jsx
<App>{"Hello world"}</App>;
<App prop={"Hello world"}>{'Hello world'}</App>;
```
Examples of **incorrect** code for this rule, when configured with `{ props: "never", children: "never" }`:
```jsx
<App>{'Hello world'}</App>;
<App prop={'Hello world'} attr={"foo"} />;
```
They can be fixed to:
```jsx
<App>Hello world</App>;
<App prop="Hello world" attr="foo" />;
```
Examples of **incorrect** code for this rule, when configured with `{ props: "always", children: "always", "propElementValues": "always" }`:
```jsx
<App prop=<div /> />;
```
They can be fixed to:
```jsx
<App prop={<div />} />;
```
Examples of **incorrect** code for this rule, when configured with `{ props: "never", children: "never", "propElementValues": "never" }`:
```jsx
<App prop={<div />} />;
```
They can be fixed to:
```jsx
<App prop=<div /> />;
```
### Alternative syntax
The options are also `always`, `never`, and `ignore` for the same meanings.
在此语法中，仅提供一个字符串，默认情况下将为检查 JSX 属性和子元素设置该选项。
For examples:
Examples of **incorrect** code for this rule, when configured with `"always"`:
```jsx
<App>Hello world</App>;
<App prop='Hello world' attr="foo">Hello world</App>;
```
They can be fixed to:
```jsx
<App>{"Hello world"}</App>;
<App prop={"Hello world"} attr={"foo"}>{"Hello world"}</App>;
```
Examples of **incorrect** code for this rule, when configured with `"never"`:
```jsx
<App prop={'foo'} attr={"bar"}>{'Hello world'}</App>;
```
It can fixed to:
```jsx
<App prop="foo" attr="bar">Hello world</App>;
```
## Edge cases
该修复程序还处理模板字面量、带引号的字符串和带转义字符的字符串。
如果规则设置为去除不必要的大括号，并且 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 表达式的使用的一致性，则应关闭此规则。