#私藏项目实操分享# 【React工作记录五】如何处理数据格式字符串让它加上标签

简介: #私藏项目实操分享# 【React工作记录五】如何处理数据格式字符串让它加上标签
+关注继续查看

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷

需求

今天我们公司领导找我 说这边有个需求需要你做一下 就是一个ant design table得table栏里面返回了一些数据格式

首先我们来看看数据格式

每一个人或动植物,\r\n都是由阴阳两种能量组合而成。
\r\n男人身上有51%是阳性能量

,\r\n有49%是阴性能量,\r\n女人身上有51%的阴性能量,\r\n有49%的阳性能量。\
r\n每个人几乎都有一半的能量在沉睡,
\r\n因此会不停寻找另外那一半,\r\

解决思路

title: '语录内容',

title: '语录内容',
               
                align: 'center',
                dataIndex: 'content',
                render:(text)=>{
                    
                  return  <p  dangerouslySetInnerHTML
={{ __html: text.replace(/\n/g,"<br/>") }}></p>
                }

总结

要点1 replace用的正则匹配完成得

要点2 dangerouslySetInnerHTML解析字符串 转换

运行结果

image.png

换行完成


相关文章
|
6月前
|
前端开发 JavaScript 虚拟化
如何处理 React 中的 onScroll 事件?
如何处理 React 中的 onScroll 事件?
361 0
|
9月前
|
前端开发 数据格式
#yyds干货盘点 【React工作记录五】如何处理数据格式字符串让它加上标签
#yyds干货盘点 【React工作记录五】如何处理数据格式字符串让它加上标签
43 0
#yyds干货盘点 【React工作记录五】如何处理数据格式字符串让它加上标签
|
前端开发
React工作63:ant design 锚点
React工作63:ant design 锚点
182 0
|
前端开发 JavaScript
React工作42:react中的jsx表达对象
React工作42:react中的jsx表达对象
66 0
|
前端开发
React工作18:工具学会全局搜索
React工作18:工具学会全局搜索
78 0
React工作18:工具学会全局搜索
|
前端开发
React工作16:ant design form两种验证
React工作16:ant design form两种验证
78 0
React工作16:ant design form两种验证
|
前端开发
React工作15:ant design table selectedRowKeys是取数组集合
React工作15:ant design table selectedRowKeys是取数组集合
201 0
|
前端开发
React工作17:ant design form格式化日期
React工作17:ant design form格式化日期
84 0
|
前端开发
React工作64:简单的锚点封装
React工作64:简单的锚点封装
124 0
|
前端开发 数据格式
React工作62:注意数据格式返回
React工作62:注意数据格式返回
59 0
React工作62:注意数据格式返回
热门文章
最新文章
相关产品
云迁移中心
推荐文章
更多