在JSX中添加空白时的最佳实践
我知道如何(和why)在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>回答 10
Stack Overflow用户
发布于 2016-12-14 20:16:58
因为 会使您拥有不间断的空格，所以您应该只在必要的地方使用它。在大多数情况下，这会产生意想不到的副作用。
老版本的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>Stack Overflow用户
发布于 2019-09-05 23:37:15
您可以使用css属性空白，并将其设置为预换行到封闭的div元素。
div {
white-space: pre-wrap;
}Stack Overflow用户
发布于 2016-10-26 22:13:36
我倾向于使用
它并不美观，但它是我发现的添加空格的最简单的方式，而且它让我可以绝对控制我添加了多少空格。
如果我想添加5个空格：
Hello <span className="second-word-formatting">World!</span>
几周后，当我回到代码中时，很容易准确地确定我要在这里做什么。
https://stackoverflow.com/questions/40264084
复制相似问题