反应文本之间的跨度空间

【问题标题】：React span space in between text反应文本之间的跨度空间
【发布时间】：2019-02-07 01:42:32
【问题描述】：

我试图在 React 中的 span 和 text 之间添加一个空格，但它在 JSX 中的行为似乎有所不同？这是代码

return(
    <div>
         <h1 className="navbar"> <span style={styles}> {timeOfDay} </span> 
          {`${firstName} ${lastName}`} It is currently {hours} clock</h1>
    </div>
    )

如您所见，晚安的 {timeOfDay} 坚持文字，我想做的是在它们之间留一个空格，我如何在 React 中实现这一点？

【问题讨论】：

标签： javascript html reactjs html-table

【解决方案1】：

在 JSX 中有多种方法可以在元素之间添加空格

使用&nbsp;

    return(
       <div>
         <h1 className="navbar"> <span style={styles}> {timeOfDay} </span> 
          &nbsp;{`${firstName} ${lastName}`} It is currently {hours} clock</h1>
      </div>
    )

使用{' '}

    return(
       <div>
         <h1 className="navbar"> <span style={styles}> {timeOfDay} </span> 
          {` ${firstName} ${lastName}`} It is currently {hours} clock</h1>
      </div>
    )

使用 CSS（填充/边距跨度）

【讨论】：