React - JSX 換行符不起作用


Posted by hata0833 on 2022-09-30

參考:https://www.cnblogs.com/domin520Jian/p/16385579.html

背景:業務上接了一個小優化的需求,後端傳來帶有換行符\n的字符串,但在顯示時不生效的問題
a\nb\nc
期望效果:

a
b
c

實際效果:

a b c

換行符被識別出來了,但是沒有生效

基本上網路上找到的方法有二:

  1. 用replace將\n替代成<br />
    info.replace(/\\n/g, '<br/>);
    在這兒試了沒有用
  2. 使用dangerousSetInnerHTML將字符串插入
    <div style={{whiteSpace: 'pre-wrap'}} dangerousSetInnerHTML={{__html: replaceInfo}}>
    如字面意義,dangerousSetInnerHTML有被攻擊的風險,因為直接取後端傳來的字符串插入html中,如果傳來的是JavaScript代碼呢?可能會造成CORS攻擊

其實核心只是style={{whiteSpace: 'pre-wrap'}}
只要<div style={{whiteSpace: 'pre-wrap'}}> { replaceInfo } </div>即可完美解決~


#React #JSX







Related Posts

教你朋友 CLI(command line)

教你朋友 CLI(command line)

2022 個人愛用程式開發工具

2022 個人愛用程式開發工具

不用框架實作 React 第一次渲染 SSR + Routing

不用框架實作 React 第一次渲染 SSR + Routing


Comments