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

javascript reactjs react-jsx

2022-08-30 04:10:25

我知道如何（以及为什么）在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>

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

答案 2

可以使用 css 属性空格，并将其设置为预先包装到封闭的 div 元素。

div {
     white-space: pre-wrap;
}