在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

我倾向于使用

它并不漂亮，但它是我发现的添加空白最容易混淆的方法，它让我可以绝对控制添加多少空白。

如果要添加5个空格：

你好

几周后，当我回到代码中时，很容易确定我在这里想要做什么。

Answer 2

您可以使用css属性空白并将其设置为预换行到封闭的div元素。

div {
     white-space: pre-wrap;
}

Answer 3

因为<代码>

我相信，旧版本的React会自动插入

虽然他们不再这样做，但这是在您自己的代码中处理此问题的安全方法。除非您有专门针对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>