如何在jsx中保留空间?

时间:2017-03-27 07:49:46

标签: react-jsx

这是我的jsx

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

您可以看到单词isspan标记之间有空格

但是,在渲染页面时,空格将被删除

enter image description here

我可以插入一个&nbsp;来创建一个空格,即

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

enter image description here

但它是jsx中的正确解决方案吗?

1 个答案:

答案 0 :(得分:0)

我通过运行以下

获得正确的输出
   return (
      <div className="test1">
        Today is <span className="test2">
          23 Mar 2017
        </span>.
      </div>

    );


Today is 23 Mar 2017.

由于我没有{styles}课,所以我使用了一些随机名称。{styles}似乎有问题。
您也可以使用mark代替span

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