Question

我理解如何（和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>

Answer 1

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

旧版本的React，我相信在v14之前的所有版本，当你在标记内部有换行符时会自动插入 。

虽然他们不再这样做，但这是一种在您自己的代码中处理此问题的安全方法。除非您的样式专门针对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

您可以使用模板文字：

{` `} // Notice this sign " ` ",its not normal quotes.

我们可以使用带有表达式的文字（花括号内的代码）：

`${2 * a + b}.?!=-`

Answer 3

我倾向于使用 

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

如果我想添加5个空格：

Hello     World!

当我几周后回到代码时，很容易确定我正在尝试做什么。

Answer 4

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

{" "} or {' '}

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

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

您也可以像下面一样使用＆nbsp

<span>sample text &nbsp; <span>

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

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

Answer 5

您不需要插入maxEntries或用 包装多余的空格。只需将HTML实体代码用于空间-

将常规空间作为HTML实体插入

&#32;

Answer 6

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

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

Answer 7

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

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

或

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

每一个都产生干净的html，而没有其他 或其他无关的标记。与使用{' '}相比，它创建的文本节点更少，并允许使用{' hello & goodbye '}做n

的html实体。

Answer 8

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

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

Answer 9

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

div {
     white-space: pre-wrap;
}

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

9 个答案: