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

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

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

我相信v14之前的所有旧版本的React都会<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属性空白，并将其设置为预包装到封闭的div元素。

div {
     white-space: pre-wrap;
}

您可以添加带引号的简单空白： {" "}

您也可以使用模板文字，它允许插入，嵌入表达式（花括号内的代码）：

`${2 * a + b}.?!=-` // Notice this sign " ` ",its not normal quotes.

我倾向于使用  

这不是很漂亮，但这是添加我发现的空格最不容易混淆的方法，它使我可以完全控制要添加的空格数。

如果要添加5个空格：

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

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

您无需使用插入 或包装多余的空格<span/>。只需将HTML实体代码用于空间- 

插入常规空间作为HTML实体

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

我一直在尝试在将文本放置在不同行上的组件旁边时使用一个好的约定，并找到了两个不错的选择：

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

要么

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

这些中的每一个都产生干净的html，而没有其他 或其他无关的标记。与使用相比{' '}，它创建的文本节点更少，并且允许在{' hello & goodbye '}不使用html实体的情况下使用。

您可以使用大括号之类的表达式（如双引号和单引号）来表示空格，例如，

{" "} or {' '}

您还可以使用ES6模板文字，即

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

您也可以像下面一样使用＆nbsp（跨度内）

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

打印HTML内容时，也可以在危险地使用SetInnerHTML中使用＆nbsp

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

使用{}或{``}或 在span元素和内容之间创建空间。

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

如果目标是分离两个元素，则可以使用如下所示的CSS：

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