React中元素之间的空格？答案

【问题标题】：Spaces between elements in React?React中元素之间的空格？
【发布时间】：2019-06-12 18:01:06
【问题描述】：

在纯 html 中，以下结果会在两个按钮之间产生一个空格，但在 React 中不会：

  <button> Button 1 </button>

  <button> Button 2 </button>

我不得不求助于以下方法来获得空间。

  <button> Button 1 </button>
  {' '}
  <button> Button 2 </button>

这是出乎意料的。在任何人给出 CSS 解决方案之前，请注意以下内容也会导致输出之间没有空格：

{'firstname'}

{'lastname'}

给予：

firstnamelastname

有空格的正常方式是什么（最好是 HTML 这样做）？

我还发现这种类型的插值可以工作，但对我来说感觉很糟糕：

  {`
    ${this.date()}
    - 
    ${this.verb()} @
    ${this.time()}
    -
    flight
    ${this.props.flight.airline.codeIcao}
    ${this.props.flight.number}
     - 
    ${this.props.flight.airport.codeIcao}
 `}

【问题讨论】：

这不出乎意料。见github.com/facebook/react/issues/1643#issuecomment-45148887
@jonrsharpe 你看到那里的反对票数了吗？对于刚接触 React 的人来说，这是出乎意料的。无论预期如何，问题仍然是如何实际获取空间。
你知道如何获取它们；你在你的问题中展示它。
@jonrsharpe 问题是这样做的“正常”或正确方法是什么。但你知道问题是什么。如果我这样做的方式是“正常的”，你就可以这么说。
Best practice when adding whitespace in JSX的可能重复

标签： javascript reactjs

【解决方案1】：

你可以简单地使用

{`${firstName} ${lastName}`}  // firstName and lastName are variables holding the actual value

如果您使用任何 html 元素，如 div、按钮等，则需要使用 css 类来管理元素的边距。

【讨论】：

插值选项已在我的问题中列为可能的解决方案。
插值通常是我通常处理间距的方式。 HTML 空间条目和 {' '} 也可以工作。

【解决方案2】：

如果你想要纯 HTML 中的空格，&nbsp; 呢？

          <div>
            <button>
              text1
            </button>
            &nbsp;
            <button>
              text1
            </button>
          </div>

stackblitz 上的工作示例：demo

【讨论】：

【解决方案3】：

你可以使用和添加两个和四个不间断空格

【讨论】：