如何在jsx中保留空間？

Question

這是我的JSX

return (
     <div className={styles.message}> 
     Today is <span className={styles.date}> 
      23 Mar 2017 
     </span>. 
     </div> 
    ); 

你可以看到有，空間被刪除的字is和span標籤

然而，當呈現頁面之間的空間

我可以插入 來創建空間，即

return (
    <div className={styles.message}> 
    Today is&nbsp;<span className={styles.date}> 
     23 Mar 2017 
    </span>. 
    </div> 
); 

但它是在JSX妥善解決？看起來有點醜陋到處都是 。

Answer 1

我通過運行以下

return (
     <div className="test1"> 
     Today is <span className="test2"> 
      23 Mar 2017 
     </span>. 
     </div> 

    ); 


Today is 23 Mar 2017. 

由於我沒有{styles}類，所以我用一些隨機name.It得到正確的輸出似乎有一些問題{styles}。
您也可以使用mark代替span

"<mark className="mark-blue">{data}</mark>"