当前位置: 首页 > 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有点帮助❤️

相关文章:

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

比如接口返回一个值 const values [23.00, 40.00/kg];想做到如下效果&#xff0c; 如果单纯的用render渲染会很简单&#xff0c; 但是在ts文件中处理&#xff0c;所以采用了createElement拼接 代码如下&#xff1a; format: (values: string[]) > {if (!values || !val…...

Pinia之1:介绍Pinia、项目中引入Pinia

欢迎来到“雪碧聊技术”CSDN博客&#xff01; 在这里&#xff0c;您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者&#xff0c;还是具有一定经验的开发者&#xff0c;相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导&#xff0c;我将…...

Python双向链表、循环链表、栈

一、双向链表 1.作用 双向链表也叫双面链表。 对于单向链表而言。只能通过头节点或者第一个节点出发&#xff0c;单向的访问后继节点&#xff0c;每个节点只能记录其后继节点的信息&#xff08;位置&#xff09;&#xff0c;不能向前遍历。 所以引入双向链表&#xff0c;双…...

5G基础学习笔记

功能软件化 刚性网络&#xff1a;固定连接、固定功能、固化信令交互 柔性网络&#xff1a;网元拆解成服务模块&#xff0c;基于API接口调用 服务化架构&#xff08;SBA&#xff09; Service based Architecture &#xff08;SBA&#xff09;: 借鉴了业界成熟的SOA、微服务架…...

Python plotly库介绍

一、引言 在数据可视化领域&#xff0c;Python提供了众多强大的库。其中&#xff0c;plotly是一个功能强大、交互式的可视化库&#xff0c;可以创建各种类型的图表&#xff0c;包括线图、散点图、柱状图、饼图、3D图表等。它不仅提供了美观的可视化效果&#xff0c;还支持交互式…...

go编程中yaml的inline应用

下列代码&#xff0c;设计 Config 和 MyConfig 是为可扩展 Config&#xff0c;同时 Config 作为公共部分可保持变化。采用了匿名的内嵌结构体&#xff0c;但又不希望 yaml 结果多出一层。如果 MyConfig 中的 Config 没有使用“yaml:",inline"”修饰&#xff0c;则读取…...

手机实时提取SIM卡打电话的信令声音-智能拨号器的双SIM卡切换方案

手机实时提取SIM卡打电话的信令声音 --智能拨号器app的双SIM卡切换方案 一、前言 在蓝牙电话的方案中&#xff0c;由于采用市场上的存量手机来做为通讯呼叫的载体&#xff0c;而现在市面上大部分的手机都是“双卡双待单通”手机&#xff0c;简称双卡双待手机。即在手机开机后…...

探索Python WebSocket新境界:picows库揭秘

文章目录 探索Python WebSocket新境界&#xff1a;picows库揭秘第一部分&#xff1a;背景介绍第二部分&#xff1a;picows库概述第三部分&#xff1a;安装picows库第四部分&#xff1a;简单库函数使用方法第五部分&#xff1a;场景应用第六部分&#xff1a;常见Bug及解决方案第…...

2024年11月24日Github流行趋势

项目名称&#xff1a;FreeCAD 项目维护者&#xff1a;wwmayer, yorikvanhavre, berndhahnebach, chennes, WandererFan等项目介绍&#xff1a;FreeCAD是一个免费且开源的多平台3D参数化建模工具。项目star数&#xff1a;20,875项目fork数&#xff1a;4,117 项目名称&#xff1…...

NewStar CTF week5 Crypto wp

easy_ecc ecc的模板题&#xff0c;稍加推理就会发现c1mc2*k因此做一个减法就行&#xff0c;需要注意的点是c1,c2必须放到ecc里面过一道才能出正确结果 k 86388708736702446338970388622357740462258632504448854088010402300997950626097 p 644088904089909773124499208053…...

vue3+antd注册全局v-loading指令

文章目录 1. 创建指令文件2. 全局注册3. 使用 1. 创建指令文件 src/directives 在directives中创建如下文件 src│─directives│ index.ts└─loadingindex.tsindex.vuedirectives/ index.ts export * from ./loadingdirectives/loading/index.ts import { createApp } f…...

初试无监督学习 - K均值聚类算法

文章目录 1. K均值聚类算法概述2. k均值聚类算法演示2.1 准备工作2.2 生成聚类用的样本数据集2.3 初始化KMeans模型对象&#xff0c;并指定类别数量2.4 用样本数据训练模型2.5 用训练好的模型生成预测结果2.6 输出预测结果2.7 可视化预测结果 3. 实战小结 1. K均值聚类算法概述…...

捉虫笔记(七)-再探谁把系统卡住了

捉虫笔记&#xff08;七&#xff09;-再探谁把系统卡住 1、内核调试 在实体物理机上&#xff0c;内核调试的第一个门槛就是如何建立调试链接。 这里我选择的建立网络连接进行内核调试。 至于如何建立网络连接后续文章再和大家分享。 2、如何分析 在上一篇文章中&#xff0c;我们…...

【Linux课程学习】:《简易版shell实现和原理》 《哪些命令可以让子进程执行,哪些命令让shell执行(内键命令)?为什么?》

&#x1f381;个人主页&#xff1a;我们的五年 &#x1f50d;系列专栏&#xff1a;Linux课程学习 &#x1f337;追光的人&#xff0c;终会万丈光芒 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 目录 打印命令行提示符&#xff08;PrintCommandLin…...

2024年11月27日Github流行趋势

项目名称&#xff1a;screenshot-to-code 项目维护者&#xff1a;abi clean99 sweep-ai kachbit vagusX项目介绍&#xff1a;通过上传截图将其转换为整洁的代码&#xff08;支持HTML/Tailwind/React/Vue&#xff09;。项目star数&#xff1a;62,429项目fork数&#xff1a;7,614…...

Java中的线程池使用详解

文章目录 Java中的线程池使用详解一、引言二、线程池的创建与使用1、线程池的创建1.1、FixedThreadPool&#xff08;固定大小线程池&#xff09;1.2、CachedThreadPool&#xff08;可缓存线程池&#xff09;1.3、SingleThreadExecutor&#xff08;单线程化线程池&#xff09;1.…...

Redis(概念、IO模型、多路选择算法、安装和启停)

一、概念 关系型数据库是典型的行存储数据库&#xff0c;存在的问题是&#xff0c;按行存储的数据在物理层面占用的是连续存储空间&#xff0c;不适合海量数据存储。 Redis在生产中使用的最多的是用作数据缓存。 服务器先在缓存中查询数据&#xff0c;查到则返回&#xff0c;…...

计算机网络 第4章 网络层

计算机网络 &#xff08;第八版&#xff09;谢希仁 第 4 章 网络层4.2.2 IP地址**无分类编址CIDR**IP地址的特点 4.2.3 IP地址与MAC地址4.2.4 ARP 地址解析协议4.2.5 IP数据报的格式题目2&#xff1a;IP数据报分片与重组题目&#xff1a;计算IP数据报的首部校验和(不正确未改) …...

Java学习笔记--继承方法的重写介绍,重写方法的注意事项,方法重写的使用场景,super和this

目录 一&#xff0c;方法的重写 二&#xff0c;重写方法的注意事项 三&#xff0c;方法重写的使用场景 四&#xff0c;super和this 1.继承中构造方法的特点 2.super和this的具体使用 super的具体使用 this的具体使用 一&#xff0c;方法的重写 1.概述:子类中有一个和父类…...

高级java每日一道面试题-2024年11月27日-JVM篇-JVM的永久代中会发生垃圾回收么?

如果有遗漏,评论区告诉我进行补充 面试官: JVM的永久代中会发生垃圾回收么? 我回答: 在Java虚拟机&#xff08;JVM&#xff09;的历史版本中&#xff0c;确实存在一个称为“永久代”&#xff08;Permanent Generation, 或者简称PermGen&#xff09;的内存区域。永久代主要用…...

Spring Boot教程之十: 使用 Spring Boot 实现从数据库动态下拉列表

使用 Spring Boot 实现从数据库动态下拉列表 动态下拉列表&#xff08;或依赖下拉列表&#xff09;的概念令人兴奋&#xff0c;但编写起来却颇具挑战性。动态下拉列表意味着一个下拉列表中的值依赖于前一个下拉列表中选择的值。一个简单的例子是三个下拉框&#xff0c;分别显示…...

基于混合ABC和A*算法复现

基于混合ABC和A*算法复现 一、背景介绍二、算法原理&#xff08;一&#xff09;A*算法原理&#xff08;二&#xff09;人工蜂群算法原理&#xff08;三&#xff09;混合ABC和A*算法策略 三、代码实现&#xff08;一&#xff09;数据准备&#xff08;二&#xff09;关键函数实现…...

狂野飙车8+(Asphalt 8+) for Mac 赛车竞速游戏 安装教程

Mac分享吧 文章目录 狂野飙车8(Asphalt 8) for Mac 赛车竞速游戏软件 效果图展示一、狂野飙车8(Asphalt 8) 赛车竞速游戏 Mac电脑版——v2.1.11️⃣&#xff1a;下载软件2️⃣&#xff1a;安装软件2.1 左侧安装包拖入右侧文件夹中&#xff0c;等待安装完成&#xff0c;运行软件…...

网络技术-VRRP(虚拟路由冗余协议)部署介绍

一、VRRP的含义 VRRP&#xff08;Virtual Router Redundancy Protocol&#xff0c;虚拟路由冗余协议&#xff09;是一种高度可靠的路由器备用协议&#xff0c;用于在局域网内部提供路由器冗余。 其部署方式主要是通过多个路由器组成一个虚拟路由器组&#xff0c;通过协议选…...

C语言解决空瓶换水问题:高效算法与实现

标题&#xff1a;C语言解决空瓶换水问题&#xff1a;高效算法与实现 一、问题描述 在一个饮料促销活动中&#xff0c;你可以通过空瓶换水的方式免费获得更多的水&#xff1a;3个空瓶可以换1瓶水。喝完这瓶水后&#xff0c;空瓶会再次变为空瓶。假设你最初拥有一定数量的空瓶&a…...

day2全局注册

全局注册代码&#xff1a; //文件核心作用&#xff1a;导入App.vue,基于App.vue创建结构渲染index.htmlimport Vue from vue import App from ./App.vue //编写导入的代码&#xff0c;往代码的顶部编写&#xff08;规范&#xff09; import HmButton from ./components/Hm-But…...

鸿蒙多线程应用-taskPool

并发模型 并发模型是用来实现不同应用场景中并发任务的编程模型&#xff0c;常见的并发模型分为基于内存共享的并发模型和基于消息通信的并发模型。 Actor并发模型作为基于消息通信并发模型的典型代表&#xff0c;不需要开发者去面对锁带来的一系列复杂偶发的问题&#xff0c;同…...

【失败经验】将算法模型封装为安卓应用

背景&#xff1a;不懂安卓开发&#xff0c;希望能使用大模型编码完成安卓应用生成&#xff0c;调用算法模型进行预测。 模型准备&#xff1a; pip方案安装pcnn&#xff1b; 然后需要将pytorch训练完成的算法模型保存为torchscript模型&#xff0c;然后使用pcnn转换为ncnn的模…...

ABAP OOALV模板

自用模板&#xff0c;可能存在问题 一、主程序 *&---------------------------------------------------------------------* *& Report ZVIA_OO_ALV *&---------------------------------------------------------------------* REPORT ZVIA_OO_ALV.INCLUDE ZVI…...

YOLOv8-ultralytics-8.2.103部分代码阅读笔记-autobatch.py

autobatch.py ultralytics\utils\autobatch.py 目录 autobatch.py 1.所需的库和模块 2.def check_train_batch_size(model, imgsz640, ampTrue, batch-1): 3.def autobatch(model, imgsz640, fraction0.60, batch_sizeDEFAULT_CFG.batch): 1.所需的库和模块 # Ultraly…...

织梦做的网站如何放在网上/武汉百度搜索优化

每个寄存器在理论上都可以从RAM读取信息或将信息写入RAM中&#xff0c;ALU算数逻辑单元&#xff0c;它很容易4个字节上进行加法减法移位操作。...

php mysql做网站登录/营销软件网站

网上看到好多朋友都通过了软考&#xff0c;我也好想参加软考&#xff0c;听说这个证含金量挺高的&#xff0c;加油,打算下半年参加考试&#xff0c;现在赶紧的看书哦&#xff0c;下面是希赛的考试资料网站&#xff0c;有时间上来多学习了&#xff0c;也希望参加过和准备参加的朋…...

新浪sae安装wordpress/东莞搜索引擎推广

大家在做淘宝的时候&#xff0c;每个小伙伴的店铺都肯定会有新品上架&#xff0c;既然是新品上架&#xff0c;遇到的问题肯定也是非常多的&#xff0c;那么今天我们来讲的是新品上架时如何获得高权重&#xff1f; 第一步&#xff1a;产品上架 一、小伙伴们都知道新的产品上架的…...

网站建设免费加盟代理/小程序运营推广公司

近期服务器不太稳定。。电信方面有点无暇顾及此处。。所以。。我的网站也要遭殃了一段时间咯&#xff01;转载于:https://www.cnblogs.com/tataa/archive/2004/08/24/36193.html...

wordpress自适应高级图片主题/315影视行业

腾讯做产品厉害&#xff0c;这个众人皆知。他们不仅打造了QQ和微信这样的国民产品&#xff0c;还形成了自己的产品方法和文化。 阿里最早的“中供铁军”名声远扬&#xff0c;他们的推广销售和业务拓展能力也形成了一种阿里文化。 百度一直以技术自居&#xff0c;从传统的核心搜…...

药店网站建设相关费用/北京疫情消息1小时前

fork() 是Unix系统创建子进程的唯一方法&#xff0c;其他包或模块的底层都调fork。fork作用是复制克隆一个新进程&#xff08;子进程&#xff09;&#xff0c;继续同时向下执行。 特点&#xff1a;fork被调用一次&#xff0c;返回两次&#xff0c;一次在父进程中返回子进程PID…...