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

我知道如何(以及 为什么)在 JSX 中添加空格，但是我想知道什么是最佳实践，或者是否有任何实际的不同？

将两个元素包装在一个 span 中

<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>
195125 次浏览
小开

我倾向于使用 &nbsp;

这并不漂亮，但它是我发现的添加空格的最不令人困惑的方法，它让我能够完全控制我添加了多少空格。

如果我想加5个空格:

Hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span className="second-word-formatting">World!</span>

当我几周后再回到代码时，很容易确定我在这里要做什么。

小开
最佳答案

因为 &nbsp使您具有非中断空格，所以您应该只在必要时使用它。在大多数情况下，这会产生意想不到的副作用。

旧版本的 React，我相信所有14版本之前的版本，都会在标签内有换行符时自动插入 <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 * a + b}.?!=-` // Notice this sign " ` ",its not normal quotes.
小开

我一直试图想出一个好的惯例，当把文本放在不同行的组件旁边时，可以使用这个惯例，并找到了几个不错的选项:

<p>
Hello {
<span>World</span>
}!
</p>

或者

<p>
Hello {}
<span>World</span>
{} again!
</p>

其中每个都生成干净的 html，而不需要额外的 &nbsp;或其他无关标记。它比使用 {' '}创建更少的文本节点，并且允许在 {' hello &amp; goodbye '}不允许的地方使用 html 实体。

小开

你可以使用花括号，比如用双引号和单引号表示空格,

{" "} or {' '}

您也可以使用 ES6模板文字，例如,

`   <li></li>` or `  ${value}`

你也可以像下面这样使用 & nbsp

<span>sample text &nbsp; </span>

当打印 html 内容时，也可以在 dangouslySetInnerHTML 中使用 & nbsp

<div dangerouslySetInnerHTML=\{\{__html: 'sample html text: &nbsp;'}} />
小开

使用 {}或{“}或 &nbsp;在 span 元素和内容之间创建空间。

<b> {notif.name} </b> <span id="value"> &nbsp;{ notif.count }{``} </span>
小开

您不需要插入 &nbsp;或用 <span/>包装您的额外空间。只是使用 HTML 实体代码的空间-&#32;

插入常规空间作为 HTML 实体

<form>
<div>Full name:</span>&#32;
<span>{this.props.fullName}</span>
</form>
小开

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

div {
white-space: pre-wrap;
}
小开

如果目标是分离两个元素，你可以使用如下 CSS:

A<span style=\{\{paddingLeft: '20px'}}>B</span>
小开

尽管使用了 &nbsp;，但这是一种简洁的方法: 使用 <Fragment>标记在变量中插入 HTML，这允许在 JSX 中创建自定义间隔符。

进口 { Fragment }..。

import { Fragment } from "react"

创建变量. 。

const space = <Fragment>&nbsp;&nbsp;&nbsp;&nbsp;</Fragment>

注意: 也可以用 <span>代替 <Fragment>

像这样使用. 。

return (
<div> some text here {space} and here... </div>
)

提交答案