在ReactJS渲染中处理空格标签和换行

Question

我正在尝试在reactjs对话框中呈现字符串。该字符串包含/ n / t空格。我希望它可以保留所有空格和换行符。我尝试了许多方法来实现这一目标，但没有一个奏效。

我的后端Python API调用返回一个响应对象，该对象在数据中包含一个字符串

response.data = "Line 1 \n Line2 \n Line3"
return response

ReactJS对话框内容具有类似的内容

<DialogContent>
<div style={{ whiteSpace: "pre-wrap" }}>{content} </div>
</DialogContent>

填充内容字段的功能

resp = await getContent(param);
await this.setState({
      content: resp["data"]
    });

对话框内容从不保留其呈现的空格，就像在纯字符串中一样。 为了测试是否将相同的字符串分配给tmp变量，它的工作原理是不确定为什么API调用返回的内容未按预期呈现

//Working if the same text is assigned to a variable
var tmp = "Line 1 \n Line2 \n Line3"
await this.setState({
      content: tmp
    });

以下是我尝试过的一些方法，但没有一个起作用：

1. 我尝试将字符串转换为Blob并使用FileReader进行 呈现内容
2. 尝试了dangerouslySetInnerHTML。没有运气。

Answer 1

您可以使用pre标签来包装内容。 pre标签同时保留空格和换行符。

所以你可以做

<DialogContent>
  <pre>{content}</pre>
</DialogContent>

Answer 2

我通过从服务器端返回正确的字符串来解决了这个问题。

result = "Line 1 \n Line2 \n Line3"
response.data =  result.decode('string-escape')
return response