@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>

何时不使用它

如果您不关心内联元素与文本相邻出现，或者您始终在元素之间显式包含 {' '} 来表示间距，则可以关闭此规则。