我知道如何(和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>
发布于 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>
发布于 2019-09-05 23:37:15
您可以使用css属性空白,并将其设置为预换行到封闭的div元素。
div {
white-space: pre-wrap;
}
发布于 2016-10-26 22:13:36
我倾向于使用
它并不美观,但它是我发现的添加空格的最简单的方式,而且它让我可以绝对控制我添加了多少空格。
如果我想添加5个空格:
Hello <span className="second-word-formatting">World!</span>
几周后,当我回到代码中时,很容易准确地确定我要在这里做什么。
https://stackoverflow.com/questions/40264084
复制相似问题