Question

我想在React应用程序中格式化一些文本，并且由于某种原因，空格被删除了。例如，如果我使用render方法

render() {

    return (<div>
               <div>{"average time: " + 5}</div>
               <div>{"best    time: " + 1}</div>             
            </div>);
}

然后渲染的输出将删除第二行中的空格，从而产生类似于

的输出

average time: 5
best time: 1

但是，我希望输出看起来像

average time: 5
best    time: 1

我该如何实现？

在其他地方，我读到在className上添加display: block可以解决此问题，但这无济于事。具体来说，我尝试过：

render() {

    return (<div>
               <div className="stats_entry">{"average time: " + 5}</div>
               <div className="stats_entry">{"best    time: " + 1}</div>             
            </div>);
}

css文件所在的位置

.stats_entry {
  display: block;
}

编辑：

根据建议，我尝试将CSS更改为

.stats_entry {
  white-space: pre;
}

但这不能解决问题。

编辑：

用pre包裹文本解决了该问题：

render() {

    return (<div>
               <div><pre>{"average time: " + 5}</pre></div>
               <div><pre>{"best    time: " + 1}</pre></div>             
            </div>);
}

Answer 1

您应该使用空格：pre;在您的CSS中

React.js应用程序正在删除字符串中的空格

1 个答案: