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

换行完成


相关文章
|
1月前
|
JavaScript 前端开发
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
64 1
|
3月前
|
前端开发 UED 开发者
react路由懒加载lazy直接使用组件标签引发的问题?
react路由懒加载lazy直接使用组件标签引发的问题?
263 0
|
3月前
|
前端开发 API
【亮剑】在Web开发中,我们经常需要使用下拉选择框(Select)来让用户从多个选项中选择一个
【4月更文挑战第30天】在React Web开发中,创建下拉选择框通常使用`<select>`标签。要设置占位符,可添加一个`value=""`的`<option>`标签。
67 0
|
3月前
|
前端开发 JavaScript
浅谈React split_分割字符串
浅谈React split_分割字符串
58 0
|
3月前
|
前端开发
React动态标签名称
React动态标签名称
45 0
|
3月前
|
前端开发 JavaScript 安全
react如何渲染包含html标签元素的字符串
react如何渲染包含html标签元素的字符串
111 0
|
3月前
|
前端开发 JavaScript 安全
react 如何return script 标签和内容
在React中,你不能直接返回一个`<script>`标签,因为React会尝试解析并渲染所有的子节点,而`<script>`标签的内容通常会被视为JavaScript代码,而不是要渲染的文本。 但是,如果你只是想在React组件中嵌入一些JavaScript代码,你可以使用`dangerouslySetInnerHTML`属性。这个属性允许你插入原始的HTML内容,但是它非常危险,因为它会执行其中的任何JavaScript代码。因此,只有在你完全信任该内容,并且知道它是安全的情况下,才应该使用这个属性。 以下是一个示例,它创建了一个包含JavaScript代码的`<script>`标签:
|
前端开发
react是否支持给标签设置自定义的属性,比如给video标签设置webkit-playsinline?
react是否支持给标签设置自定义的属性,比如给video标签设置webkit-playsinline?
139 0
|
3月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
263 0
|
3月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
89 0

热门文章

最新文章