@stylistic/

jsx-child-element-spacing

JSX 属性と式の中括弧内のスペースを強制または禁止します

ルールの詳細

React は可能な限り要素間の余分な改行を削除するため、インライン要素間にスペースを入れずに隣接するテキストとレンダリングされる可能性があります。これは多くの場合エラーを示しているため、このルールはあいまいなスペースを持つ JSX マークアップを検出しようとします。

このルールの**誤った**コードの例

<div>
  Here is a
  <a>link</a>
</div>

<div>
  <b>This text</b>
  is bold
</div>

このルールの**正しい**コードの例

<div>
  Spacing is
  {' '}
  <a>explicit</a>
</div>

<div>
  Lack of spacing is{/*
  */}<a>explicit</a>
</div>

使用しない場合

インライン要素がテキストに隣接して表示されることを気にしない場合、または要素間に明示的に `{' '}` を含めてスペースを示す場合は、このルールを無効にすることができます。