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

Question

我理解如何(以及为什么)在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>

Answer 1

因为&nbsp你有不间断的空间,你应该只在必要时使用它.在大多数情况下,这会产生意想不到的副作用.

较旧版本的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>

Answer 2

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

div {
     white-space: pre-wrap;
}

Answer 3

您可以使用模板文字:

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

我们可以使用带有表达式的文字(花括号内的代码):

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

Answer 4

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

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

或者

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

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

Answer 5

我倾向于使用  

它不是很漂亮,但它是添加我发现的空白的最不容易的方式,它让我可以绝对控制我添加的空白量.

如果我想添加5个空格:

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

几周之后我回到代码时,很容易确定我在这里想要做什么.

Answer 6

您可以使用大括号，如带有双引号和单引号的表达式，即，

{" "} or {' '}

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

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

您还可以使用   如下所示（跨度内）

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

打印 html 内容时，您还可以在危险的SetInnerHTML 中使用  

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

Answer 7

您不需要插入 或包裹额外的空间<span/>。只需使用 HTML 实体代码进行空间 - 

将常规空格插入为 HTML 实体

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