@stylistic/jsx/

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>

何时不使用它

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