react/jsx-curly-brace-presence 樣式
當只有字面值時，禁止不必要的 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 元素的 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>`
它們是 always、never 和 ignore，用於檢查 JSX 屬性和子元素。
- `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 表達式時保持一致性，則應關閉此規則。