ant design 如何将后台传送的带特殊字符的数据转义为html解析

目录

问题场景

解决

拓展

---

问题场景

ant design 是基于React实现的组件库，会将\n这样的特殊字符转成空格，但是我们想让数据显示在前端界面上，怎么做呢？

解决

首先，将data中的\n替换为<br >
   因为ant design 直接将特殊字符转换成空格了，我们应将特殊字符自己处理一下

data = json.data.replace(/\n/g,'<br />');

其次，用dangerouslySetInnerHTML属性转义字符

经过上一步我们只是把data的特殊字符转成html能识别的字符，但是ant design是基于react的，所以直接显示的话不会转义，此时用dangerouslySetInnerHTML属性转义字符（注意：定义在组件属性上）

<p dangerouslySetInnerHTML={
  { __html: logData}} />

 

拓展

html的转义序列 https://www.cnblogs.com/guozhe/archive/2013/11/06/3409985.html