添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

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

0 人关注

我试图在 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.
  • javascript
    python
    reactjs
    jsx
    Venkatesh Marepalli
    Venkatesh Marepalli
    发布于 2019-08-01
    2 个回答
    Sahil Raj Thapa
    Sahil Raj Thapa
    发布于 2019-08-02
    0 人赞同

    你可以使用 pre 标签来包住内容。替换代码0】标签同时保留了空格和换行符。

    所以你可以做

    <DialogContent>
      <pre>{content}</pre>
    </DialogContent>
        
    它在水平方向上显示为一条长线 Line1 \n Line2 \n Line3
    Venkatesh Marepalli
    Venkatesh Marepalli
    发布于 2019-08-02
    0 人赞同

    我通过从服务器端返回一个适当的字符串解决了这个问题。