在JSX中添加空格的最佳做法

Question

我知道如何（以及为什么在JSX中添加空格，但是我想知道什么是最佳实践，或者是否有什么真正的区别？

将两个元素都包起来

<div className="top-element-formatting">
  <span>Hello </span>
  <span className="second-word-formatting">World!</span>
</div>

一行添加

  <div className="top-element-formatting">
    Hello <span className="second-word-formatting">World!</span>
  </div>

用JS添加空间

<div className="top-element-formatting">
    Hello {" "}
    <span className="second-word-formatting">World!</span>
</div>

Answer 1

因为&nbsp会导致您有不间断的空格，所以只应在必要时使用它。在大多数情况下，这会产生意想不到的副作用。

我相信较早版本的React（v14之前的所有版本）会<span> </span>在标记中包含换行符时自动插入。

尽管他们不再这样做，但这是在您自己的代码中处理此问题的安全方法。除非您具有专门针对的样式span（通常是不好的做法），否则这是最安全的方法。

根据您的示例，您可以将它们放在一行上，因为它很短。在更长的情况下，这可能是您应该做的：

  <div className="top-element-formatting">
    Hello <span className="second-word-formatting">World!</span>
    <span> </span>
    So much more text in this box that it really needs to be on another line.
  </div>

此方法对于自动修剪文本编辑器也是安全的。

另一种方法是{' '}不插入随机HTML标记。在设置样式，突出显示元素并从DOM中消除混乱时，这可能会更加有用。如果您不需要向后兼容React
v14或更早的版本，那么这应该是您的首选方法。

  <div className="top-element-formatting">
    Hello <span className="second-word-formatting">World!</span>
    {' '}
    So much more text in this box that it really needs to be on another line.
  </div>