我试图在 reactjs Dialog box 中呈现一个字符串。该字符串包含/n/t空格。我希望它在渲染时保留所有的空格和换行。我尝试了很多方法来实现这一点,但都没有成功。
我的后端Python API调用返回一个响应对象,其中包含一个字符串的数据
response.data = "Line 1 \n Line2 \n Line3"
return response
ReactJS Dialog的内容有这样的内容
<DialogContent>
<div style={{ whiteSpace: "pre-wrap" }}>{content} </div>
</DialogContent>
填充内容字段的函数
resp = await getContent(param);
await this.setState({
content: resp["data"]
对话框内容在渲染时从不保留空格,因为它是一个普通的字符串。
为了测试起见,如果我把相同的字符串分配给一个临时变量,它就能工作,不知道为什么API调用返回的内容不能像预期的那样被呈现出来。
//Working if the same text is assigned to a variable
var tmp = "Line 1 \n Line2 \n Line3"
await this.setState({
content: tmp
以下是我尝试过的一些方法,但都没有成功。
I have tried to convert the string to Blob and use FileReader to
render the content
Tried dangerouslySetInnerHTML
. No luck.