我了解如何（以及为什么）在 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>
因为 会导致您有不间断的空格，所以您应该只在必要时使用它。在大多数情况下，这会产生意想不到的副作用。
旧版本的 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>
您可以使用 css 属性 white-space 并将其设置为预包装到封闭的 div 元素。
div {
white-space: pre-wrap;
}
我倾向于使用
它并不漂亮，但它是我发现的添加空格最不令人困惑的方法，它让我可以绝对控制添加多少空格。
如果我想添加 5 个空格：
Hello <span className="second-word-formatting">World!</span>
当我几周后回到代码时，很容易准确地确定我在这里尝试做什么。
您可以添加带引号的简单空格： {" "}
您也可以使用模板文字，它允许插入、嵌入表达式（大括号内的代码）：
`${2 * a + b}.?!=-` // Notice this sign " ` ",its not normal quotes.
您可以使用大括号，如带有双引号和单引号的表达式，即，
{" "} or {' '}
您还可以使用 ES6 模板文字，即，
` <li></li>` or ` ${value}`
您还可以使用 如下所示（跨度内）
<span>sample text </span>
打印 html 内容时，您还可以在危险的SetInnerHTML 中使用
<div dangerouslySetInnerHTML={{__html: 'sample html text: '}} />