在文本之间反应跨度

Question

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

npm

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

Answer 1

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

1. 使用 

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

1. 使用{' '}

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

1. 使用CSS（填充/边距跨距）