#私藏项目实操分享# 【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

换行完成


相关文章
|
4月前
|
JavaScript 前端开发
react字符串转为dom标签,类似于Vue中的v-html
本文介绍了在React中将字符串转换为DOM标签的方法,类似于Vue中的`v-html`指令,通过使用`dangerouslySetInnerHTML`属性实现。
134 0
react字符串转为dom标签,类似于Vue中的v-html
|
8月前
|
前端开发 UED 开发者
react路由懒加载lazy直接使用组件标签引发的问题?
react路由懒加载lazy直接使用组件标签引发的问题?
552 0
|
前端开发
前端项目实战玖拾伍react-admin+material ui-踩坑-List的用法之disableSyncWithLocation查询字符串同步
前端项目实战玖拾伍react-admin+material ui-踩坑-List的用法之disableSyncWithLocation查询字符串同步
69 0
|
8月前
|
前端开发 JavaScript
浅谈React split_分割字符串
浅谈React split_分割字符串
125 0
|
8月前
|
前端开发
React动态标签名称
React动态标签名称
85 0
|
8月前
|
前端开发 JavaScript 安全
react如何渲染包含html标签元素的字符串
react如何渲染包含html标签元素的字符串
188 0
|
8月前
|
前端开发 JavaScript 安全
react 如何return script 标签和内容
在React中,你不能直接返回一个`<script>`标签,因为React会尝试解析并渲染所有的子节点,而`<script>`标签的内容通常会被视为JavaScript代码,而不是要渲染的文本。 但是,如果你只是想在React组件中嵌入一些JavaScript代码,你可以使用`dangerouslySetInnerHTML`属性。这个属性允许你插入原始的HTML内容,但是它非常危险,因为它会执行其中的任何JavaScript代码。因此,只有在你完全信任该内容,并且知道它是安全的情况下,才应该使用这个属性。 以下是一个示例,它创建了一个包含JavaScript代码的`<script>`标签:
156 0
|
前端开发
react是否支持给标签设置自定义的属性,比如给video标签设置webkit-playsinline?
react是否支持给标签设置自定义的属性,比如给video标签设置webkit-playsinline?
174 0
|
前端开发 JavaScript
React 解析html标签
React 解析html标签
104 0
|
前端开发
前端项目实战壹佰壹拾捌react-admin+material ui-react-admin之SimpleList中primaryText使用二返回字符串
前端项目实战壹佰壹拾捌react-admin+material ui-react-admin之SimpleList中primaryText使用二返回字符串
57 0