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

Question

我了解如何（和）在 JSX 中添加白色 space，但我想知道什么是最佳实践或者是否有任何真正的区别？

将两个元素包裹在一个范围内

<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添加space

<div className="top-element-formatting">
    Hello {" "}
    <span className="second-word-formatting">World!</span>
</div>

Answer 1

我倾向于使用 

它不是很漂亮，但它是我发现的添加空格的最简单的方法，它让我可以完全控制我添加的空格数量。

如果我要加5个空格：

Hello     World!

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

Answer 2

因为 &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 3

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

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

`${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 而没有额外的   或其他无关的标记。与使用 {' '} 相比，它创建的文本节点更少，并且允许使用 html 个实体，而 {' hello & goodbye '} 则不能。

Answer 5

对于 space，您可以像表达式一样使用花括号，同时使用双引号和单引号，即

{" "} or {' '}

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

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

您也可以像下面这样使用（跨度内）

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

打印html内容时也可以在dangerouslySetInnerHTML中使用

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

Answer 6

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

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

Answer 7

您不需要插入   或用  包裹额外的 space。只需使用 HTML 实体代码即可 space -  

插入正则 space 作为 HTML-entity

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

Answer 8

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

div {
     white-space: pre-wrap;
}

Answer 9

如果目标是分隔两个元素，您可以像下面这样使用 CSS：

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

Answer 10

尽管使用   这是一个巧妙的方法：使用 <Fragment> 标签将 HTML 插入到变量中，这允许创建自定义间隔符以在 JSX 中使用.

导入{ Fragment } ...

import { Fragment } from "react";

创建变量..

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

注意：也可以用  代替 <Fragment>

这样使用..

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

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

Best practice when adding whitespace in JSX

javascript

reactjs

react-jsx