当前位置: 首页 > news >正文

React的ts文件中通过createElement拼接一段内容出来

比如接口返回一个值

const values = ['¥23.00', '¥40.00/kg'];

想做到如下效果,
在这里插入图片描述

如果单纯的用render渲染会很简单,
但是在ts文件中处理,所以采用了createElement拼接
代码如下:

format: (values: string[]) => {if (!values || !values.length) {return React.createElement('div', {}, '-');}const contents: Array<any> = [];forEach(values, (value: string, index: number) => {let content;const line =index === 0? React.createElement('span',{ style: { color: 'red' } },'-'): null;if (value.includes('/kg')) {const [price, kg] = value.split('/');content = React.createElement('div', {}, [React.createElement('span',{ style: { color: 'red' } },price),React.createElement('span', {}, '/'),React.createElement('span', {}, kg),line,]);} else {content = React.createElement('div', {}, [React.createElement('span',{ style: { color: 'red' } },value),line,]);}contents.push(content);});const div = React.createElement('div', {}, contents);return div;
},

希望对大家了解createElement有点帮助❤️

http://www.lryc.cn/news/492976.html

相关文章:

  • Pinia之1:介绍Pinia、项目中引入Pinia
  • Python双向链表、循环链表、栈
  • 5G基础学习笔记
  • Python plotly库介绍
  • go编程中yaml的inline应用
  • 手机实时提取SIM卡打电话的信令声音-智能拨号器的双SIM卡切换方案
  • 探索Python WebSocket新境界:picows库揭秘
  • 2024年11月24日Github流行趋势
  • NewStar CTF week5 Crypto wp
  • vue3+antd注册全局v-loading指令
  • 初试无监督学习 - K均值聚类算法
  • 捉虫笔记(七)-再探谁把系统卡住了
  • 【Linux课程学习】:《简易版shell实现和原理》 《哪些命令可以让子进程执行,哪些命令让shell执行(内键命令)?为什么?》
  • 2024年11月27日Github流行趋势
  • Java中的线程池使用详解
  • Redis(概念、IO模型、多路选择算法、安装和启停)
  • 计算机网络 第4章 网络层
  • Java学习笔记--继承方法的重写介绍,重写方法的注意事项,方法重写的使用场景,super和this
  • 高级java每日一道面试题-2024年11月27日-JVM篇-JVM的永久代中会发生垃圾回收么?
  • Spring Boot教程之十: 使用 Spring Boot 实现从数据库动态下拉列表
  • 基于混合ABC和A*算法复现
  • 狂野飙车8+(Asphalt 8+) for Mac 赛车竞速游戏 安装教程
  • 网络技术-VRRP(虚拟路由冗余协议)部署介绍
  • C语言解决空瓶换水问题:高效算法与实现
  • day2全局注册
  • 鸿蒙多线程应用-taskPool
  • 【失败经验】将算法模型封装为安卓应用
  • ABAP OOALV模板
  • YOLOv8-ultralytics-8.2.103部分代码阅读笔记-autobatch.py
  • SycoTec 4060 ER-S德国高精密主轴电机如何支持模具的自动化加工?