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

【问题标题】：Best practice when adding whitespace in JSX在 JSX 中添加空格时的最佳实践
【发布时间】：2017-03-08 22:13:56
【问题描述】：

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

【问题讨论】：

你不需要额外的跨度，React 已经修复了文本节点的长期问题，你的第二个例子很好
我不知道有定义的“最佳实践”——当然你不需要将所有内容都包含在 标签中，但我通常只是在担心时遵循通用的 HTML 实践空白。

标签： javascript reactjs react-jsx

【解决方案1】：

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

导入{ Fragment } ...

import { Fragment } from "react";

创建变量..

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

这样使用..

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

【讨论】：

【解决方案2】：

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

{" "} or {' '}

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

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

你也可以像下面这样使用 &nbsp（跨度内）

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

打印html内容时也可以在dangerlySetInnerHTML中使用&nbsp

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

【讨论】：

【解决方案3】：

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

【讨论】：

在他的 React 生命中（v17 2021），如果你在这里决定使用哪个，{'" "} 绝对是两者中的佼佼者！或者更好的是，如果您的 linter 允许，只需 { }。不需要空格，但如果您想要可读性，请添加它们。在下面未定义的答案中也提到了。
React 的官方 ESLint 规则现在自动修复此答案中提议的 {' '}。

【解决方案4】：

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

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

【讨论】：

这仅提供视觉分离，而不是语义分离。如果你复制结果，你仍然会得到AB，而不是A B。
然后我用“1 character = 8px”来计算我需要多少像素
另外，当字体大小改变时，应用的填充不再正确。

【解决方案5】：

您可以使用引号添加简单的空格：{" "}

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

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

【讨论】：

在哪个版本的 React 中这对你有用？ 15.6.2 似乎忽略了这一点。
@smhg 哟。它不依赖于反应的版本。它的 ecmascript、typescript 的特点。你可以在 Chrome 控制台中输入你的模板来测试你的模板是否正常。问题也可能出在您的 babel 设置中。
您将模板文字与 JSX 表达式混淆了。要通过 JSX 添加空格，只需将包含一个空格字符的字符串放入 JSX expression。最简单的方法是{' '}。你不需要模板文字，尽管它们可以工作（{" "} 也是如此）。
是的，这是一个有点令人困惑的错字 - 已更正。无论如何，我敢肯定，这里 99.9% 的人都在寻找模板文字 :)

【解决方案6】：

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

div {
     white-space: pre-wrap;
}

【讨论】：

如果容器是 flex 的，那么你将需要这个解决方案。
这是唯一的非对我有用的解决方案！
@Magnus 不客气，我的男人。这个答案的所有解决方案实际上都不适用于我的特殊情况。

【解决方案7】：

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

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

或

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

每一个都可以生成干净的 html，而无需额外的 &nbsp; 或其他无关标记。与使用 {' '} 相比，它创建的文本节点更少，并且允许在 {' hello &amp; goodbye '} 没有的情况下使用 html 实体。

【讨论】：

【解决方案8】：

您不需要插入&nbsp; 或用 包装多余的空间。只需使用 HTML 实体代码作为空格 - &#32;

插入常规空格作为 HTML 实体

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

【讨论】：

旁注：今天我遇到了这个问题，因为prettier 正在通过格式化空间实体来破坏我的代码。当您使用 {" "} 时，它会单独在一行上工作，并且不会中断。
我只是进来将此添加到我自己的答案中。我赞成你的。

【解决方案9】：

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

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

【讨论】：

nbsp = Non-Breakable Space，与常规空格不同的 unicode 字符并限制换行。有时这是可取的，只是指出它不等同于其他选项。

【解决方案10】：

我倾向于使用&nbsp;

它并不漂亮，但它是我发现的添加空格的最不容易混淆的方式，它让我可以完全控制我添加多少空格。

如果要加5个空格：

Hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;World!

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

【讨论】：

我无法想象在实践中使用 5 个在印刷上有意义的不间断空格会是什么，但除了这种情况之外，这在实践中使用是错误的。如果你使用它来布局，你应该使用 CSS 来代替，如果你需要添加一个空格但不要求它是不间断的，那么还有很多其他的空格可以让排版更有意义。看到这个问题，例如：stackoverflow.com/questions/8515365/…
@guioconnor 尝试扩展您的想象力并考虑一个编辑器应用程序，例如vscode，您会发现它具有完整的印刷意义：D。