#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

相关文章
|
1天前
|
前端开发 JavaScript
React 标签组件 Tag
在现代Web开发中,标签(Tag)是常见的UI元素,用于分类、标记或表示状态。本文基于React框架,介绍如何创建和管理标签组件,涵盖基础使用、样式处理及常见问题与易错点。通过函数式组件定义标签,并使用CSS或CSS-in-JS进行样式处理。常见问题包括样式冲突、事件绑定错误和可关闭标签逻辑错误,提供解决方案如命名空间、CSS模块化和正确事件绑定方法。掌握这些内容有助于提高开发效率和代码质量。
36 27
|
2月前
|
前端开发 JavaScript UED
react-router 里的 Link 标签和 a 标签有什么区别
`react-router` 中的 `Link` 标签与 HTML 中的 `a` 标签的主要区别在于:`Link` 是专门为 React 应用设计的,用于实现客户端路由导航,不会触发页面的重新加载,而 `a` 标签则会刷新整个页面。使用 `Link` 可以提升应用的性能和用户体验。
|
3月前
|
前端开发
react动态生成input、select标签以及思路总结
本文介绍了在React中动态生成input和select标签的方法,包括准备数据结构、在组件挂载时动态添加状态、页面渲染以及输入处理,最后总结了实现思路。
48 1
react动态生成input、select标签以及思路总结
|
3月前
|
前端开发 Python
React技术栈-React路由插件之自定义组件标签
关于React技术栈中React路由插件自定义组件标签的教程。
66 4
React技术栈-React路由插件之自定义组件标签
|
3月前
|
前端开发 JavaScript
React中Fragment标签和空标签的使用
在React中,Fragment标签用于包裹多个子元素,避免添加不必要的DOM元素,空标签`<>`是Fragment的简写形式。
35 2
|
3月前
|
JavaScript 前端开发
react字符串转为dom标签,类似于Vue中的v-html
本文介绍了在React中将字符串转换为DOM标签的方法,类似于Vue中的`v-html`指令,通过使用`dangerouslySetInnerHTML`属性实现。
110 0
react字符串转为dom标签,类似于Vue中的v-html
|
5月前
|
JavaScript 前端开发
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
188 1
|
7月前
|
前端开发 API
【亮剑】在Web开发中,我们经常需要使用下拉选择框(Select)来让用户从多个选项中选择一个
【4月更文挑战第30天】在React Web开发中,创建下拉选择框通常使用`<select>`标签。要设置占位符,可添加一个`value=""`的`<option>`标签。
264 0
|
7月前
|
前端开发 JavaScript
浅谈React split_分割字符串
浅谈React split_分割字符串
112 0
|
7月前
|
前端开发
React动态标签名称
React动态标签名称
78 0