Reactjs 在 JSX 中添加空格时的最佳实践

发布于12月14日

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

Wrap both elements in a span

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

Add them on one line

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

Add space with JS

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

推荐答案

因为&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>