#yyds干货盘点 React工作记录五如何处理数据格式字符串让它加上标签

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了#yyds干货盘点 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\\

#yyds干货盘点

解决思路

title: 语录内容,

align: center,
dataIndex: content,
render:(text)=>

return <p dangerouslySetInnerhtml
= __html: text.replace(/\\n/g,"<br/>") ></p>

#yyds干货盘点

总结

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

要点2 dangerouslySetInnerHTML解析字符串 转换

运行结果

#yyds干货盘点

#yyds干货盘点编辑

 换行完成


以上是关于#yyds干货盘点 React工作记录五如何处理数据格式字符串让它加上标签的主要内容,如果未能解决你的问题,请参考以下文章

#yyds干货盘点# React工作记录六十七前端实现复制文字操作

#yyds干货盘点 React工作记录一简单的React父向子组件传值props

#yyds干货盘点# React工作记录五十七添加按钮的两种方式

#yyds干货盘点 React工作记录三React中如何跳转页面传参(参数较短)

#yyds干货盘点 React工作记录二十二ant design实现嵌套table

#yyds干货盘点 React工作记录六如何实现一个图片的伪预览效果