@stylistic/jsx/

jsx-curly-brace-presence

リテラルだけで十分な場合に不要な JSX 式を許可しないか、JSX の子要素または属性のリテラルに対して JSX 式を強制します。

JSX 式が不要な状況については、React のドキュメントおよびJSX の落とし穴に関するこのページを参照してください。

ルールの詳細

デフォルトでは、このルールは JSX プロパティと子要素の両方で不要な中括弧をチェックし、警告します。後方互換性を考慮して、JSX 要素であるプロパティ値はデフォルトでは考慮されません。

オプションを渡して、JSX プロパティ、子要素、JSX 要素である JSX プロパティ値、または 3 つの組み合わせに対する中括弧の存在を強制できます。同じオプションは、不要な中括弧を許可しないだけでなく、チェックを無視する場合にも利用できます。

注意: このルールはオブジェクトで設定し、"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 テキスト文字、エスケープされた文字、および HTML エンティティ名のように見えるものなど、JSX 形式でエスケープする必要がある文字がある場合、修正によってコードが読みにくくなる可能性があるため、コードは警告されません。

"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 式の使用に関する一貫性を維持することを気にしない場合は、このルールをオフにする必要があります。