Question

从我的后端服务返回一个包含空格的字符串。当我在console.log方法中render使用此值时，它将显示带有空格的原始字符串。

但是，呈现的元素缺少值。

示例：

const a = "I am a text string"

不同于：

const a = "I  am a text string"

（注意“ I”和“ am”之间的多余空格。

render方法似乎正在从我的渲染输出中删除多余的空间。

这只是一个示例，但是我尝试向最终用户显示的原始数据必须包含额外的空间。我该如何强制React渲染原始字符串，而不是对它进行某种文本格式化？

Answer 1

我不确定React JS是否只是HTML弄乱了空间。在元素上使用以下CSS：

white-space: pre-wrap;

工作演示： wmnk7rmq8 - CodeSandbox

Answer 2

您有2个解决方案。

将white-space: pre-wrap;添加到CSS：

const a = "I    am a text    string"
const Text = props => <p className='txt'>{a}</p>

ReactDOM.render(<Text />, document.getElementById('root'))

.txt {
    white-space: pre-wrap;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.1/umd/react-dom.production.min.js"></script>
<div id='root'>

使用pre标签：

const a = "I    am a text    string"
const Text = props => <pre>{a}</pre>

ReactDOM.render(<Text />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.1/umd/react-dom.production.min.js"></script>
<div id='root'>

Answer 3

使用 white-space: pre-wrap 存在问题，例如您不能使用 AND text-overflow: ellipsis（这需要 white-space: nowrap 才有用）。我发现的“最安全”的方法是使用 Unicode 空格，默认情况下这些空格不被 HTML 压缩...

{a.replace(/ /g, "\u00a0")}

在React渲染的元素中保留空间

3 个答案: