javascript - 在 JSX 中添加空格的最佳实践

Question

我了解如何(和 why)在 JSX 中添加空格，但我想知道什么是最佳实践，或者是否有任何真正的区别？

将两个元素包裹在一个 span 中

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

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

另一种方法是使用 {' '}它不会插入随机的 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>