React - JSX 換行符不起作用

參考：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>即可完美解決～