Question

在纯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}
 `}

Answer 1

您可以简单地使用

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

如果您使用div，button等任何HTML元素，则需要使用CSS类来管理元素的边距。

Answer 2

如果您想要纯HTML格式的空格， 呢？

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

关于stackblitz的工作示例：demo

React中元素之间的空格？

2 个答案: