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

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

需求

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




首先我们来看看数据格式

每一个人或动植物,\r\n都是由阴阳两种能量组合而成。
\r\n男人身上有51%是阳性能量
,\r\n有49%是阴性能量,\r\n女人身上有51%的阴性能量,\r\n有49%的阳性能量。\
r\n每个人几乎都有一半的能量在沉睡,
\r\n因此会不停寻找另外那一半,\r\

解决思路

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

总结

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


要点2 dangerouslySetInnerHTML解析字符串 转换


运行结果

image.png

相关文章
|
5月前
|
前端开发 UED 开发者
react路由懒加载lazy直接使用组件标签引发的问题?
react路由懒加载lazy直接使用组件标签引发的问题?
119 0
|
1月前
|
前端开发 JavaScript
浅谈React split_分割字符串
浅谈React split_分割字符串
11 0
|
2月前
|
前端开发
React动态标签名称
React动态标签名称
22 0
|
3月前
|
前端开发 JavaScript 安全
react如何渲染包含html标签元素的字符串
react如何渲染包含html标签元素的字符串
59 0
|
3月前
|
前端开发 JavaScript 安全
react 如何return script 标签和内容
在React中,你不能直接返回一个`<script>`标签,因为React会尝试解析并渲染所有的子节点,而`<script>`标签的内容通常会被视为JavaScript代码,而不是要渲染的文本。 但是,如果你只是想在React组件中嵌入一些JavaScript代码,你可以使用`dangerouslySetInnerHTML`属性。这个属性允许你插入原始的HTML内容,但是它非常危险,因为它会执行其中的任何JavaScript代码。因此,只有在你完全信任该内容,并且知道它是安全的情况下,才应该使用这个属性。 以下是一个示例,它创建了一个包含JavaScript代码的`<script>`标签:
|
9月前
|
前端开发
前端项目实战玖拾伍react-admin+material ui-踩坑-List的用法之disableSyncWithLocation查询字符串同步
前端项目实战玖拾伍react-admin+material ui-踩坑-List的用法之disableSyncWithLocation查询字符串同步
43 0
|
9月前
|
前端开发
react是否支持给标签设置自定义的属性,比如给video标签设置webkit-playsinline?
react是否支持给标签设置自定义的属性,比如给video标签设置webkit-playsinline?
114 0
|
9月前
|
前端开发 JavaScript
React 解析html标签
React 解析html标签
66 0
|
9月前
|
前端开发
前端项目实战壹佰壹拾捌react-admin+material ui-react-admin之SimpleList中primaryText使用二返回字符串
前端项目实战壹佰壹拾捌react-admin+material ui-react-admin之SimpleList中primaryText使用二返回字符串
31 0
|
10月前
|
前端开发
react三元表达式通过状态输出标签
react三元表达式通过状态输出标签
44 0