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

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

news 来源：原创 2025/5/12 17:45:02

比如接口返回一个值

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…...

编程日记 2025/5/12 17:45:02

【Git系列】Git 提交历史分析：深入理解`git log`命令

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

编程日记 2025/5/13 4:37:20

深度学习笔记——生成对抗网络GAN

本文详细介绍早期生成式AI的代表性模型&#xff1a;生成对抗网络GAN。 文章目录 一、基本结构生成器判别器 二、损失函数判别器生成器交替优化目标函数 三、GAN 的训练过程训练流程概述训练流程步骤1. 初始化参数和超参数2. 定义损失函数3. 训练过程的迭代判别器训练步骤生成器…...

编程日记 2025/5/5 17:32:01

《地球科学与环境学报》

《地球科学与环境学报》报道范围涵盖基础地质、矿产地质、水资源与环境、工程地质、地球物理、地球信息科学等领域&#xff0c;刊载国内外未公开发表的有创新性或意义重大的研究论文和综述文章。 　　来稿必须包括以下项目&#xff1a;题名&#xff08;尽可能不要超过20字&…...

编程日记 2025/5/6 10:26:33

k8s 1.28 聚合层部署信息记录

–requestheader-client-ca-file –requestheader-allowed-namesfront-proxy-client –requestheader-extra-headers-prefixX-Remote-Extra- –requestheader-group-headersX-Remote-Group –requestheader-username-headersX-Remote-User –proxy-client-cert-file –proxy-cl…...

编程日记 2025/5/13 4:55:56

组件化设计的意义

鸿蒙操作系统&#xff08;HarmonyOS&#xff09;是华为公司开发的一款面向未来、面向全场景的分布式操作系统。它不仅能够支持多种智能终端设备&#xff0c;还能够实现跨设备之间的协同工作。为了满足不同设备的资源能力和业务需求&#xff0c;鸿蒙操作系统采用了组件化的设计方…...

编程日记 2025/5/13 5:01:34

2025 年河北省职业院校大数据应用与 服务（中职组）赛项样题

— 1 — 2025 年河北省职业院校大数据应用与 服务&#xff08;中职组&#xff09;赛项样题 一、背景描述 近年来&#xff0c;随着旅游业的快速发展和社交媒体的普及&#xff0c;一 些目的地因其独特的魅力或者事件而迅速走红&#xff0c;吸引了大量 游客涌入&#xff0c;使得当…...

编程日记 2025/5/12 9:17:49

宏集eXware物联网网关在水务管理系统上的应用

一、前言 水务管理系统涵盖了对城市水网、供水、排水、污水处理等多个环节的监控与管理。随着物联网&#xff08;IoT&#xff09;技术的快速发展&#xff0c;物联网网关逐渐成为水务管理系统中的关键组成部分。 宏集物联网网关以其高效的数据采集、传输和管理功能&#xff0c…...

编程日记 2025/5/12 1:28:11

【看海的算法日记✨优选篇✨】第三回：二分之妙，寻径中道

&#x1f3ac; 个人主页&#xff1a;谁在夜里看海. &#x1f4d6; 个人专栏&#xff1a;《C系列》《Linux系列》《算法系列》 ⛰️ 一念既出&#xff0c;万山无阻 目录 &#x1f4d6;一、算法思想 细节问题 &#x1f4da;左右临界 &#x1f4da;中点选择 &#x1f4da;…...

编程日记 2025/5/13 5:06:31

yolov5 解决：export GIT_PYTHON_REFRESH=quiet

当我们在第一次运行YOLOv5中的train.py程序时&#xff1a;可能会出现以下报错&#xff1a; This initial warning can be silenced or aggravated in the future by setting the $GIT_PYTHON_REFRESH environment variable. Use one of the following values: - quiet|q|silen…...

编程日记 2025/5/9 14:55:24

MongoDB聚合操作

1.聚合操作 聚合操作处理数据记录并返回计算结果。聚合操作组值来自多个文档&#xff0c;可以对分组数据执行各种操作以返回单个结果。聚合操作包含三类&#xff1a;单一作用聚合、聚合管道、MapReduce。 单一作用聚合&#xff1a;提供了对常见聚合过程的简单访问&#xff0c…...

编程日记 2025/5/12 17:27:10

Apple雷电5到底有多快？

在科技日新月异的今天&#xff0c;苹果公司始终走在技术创新的前沿。2023年9月12日&#xff0c;随着英特尔发布雷电5&#xff08;Thunderbolt 5&#xff09;规范&#xff0c;苹果迅速跟进&#xff0c;将其应用于自家的产品中。雷电5接口以其卓越的性能&#xff0c;彻底颠覆了我…...

编程日记 2025/5/13 5:13:21

项目快过：知识蒸馏 | 目标检测 |FGD | Focal and Global Knowledge Distillation for Detectors

公开时间&#xff1a;2022年3月9号 项目地址&#xff1a;https://github.com/yzd-v/FGD 论文地址&#xff1a;https://arxiv.org/pdf/2111.11837 知识蒸馏已成功地应用于图像分类。然而&#xff0c;目标检测要复杂得多&#xff0c;大多数知识蒸馏方法都失败了。本文指出&#…...

编程日记 2025/5/13 5:14:35

Spring Boot日志总结

文章目录 1.我们的日志2.日志的作用3.使用日志对象打印日志4.日志框架介绍5.深入理解门面模式(外观模式)6.日志格式的说明7.日志级别7.1日志级别分类7.2配置文件添加日志级别 8.日志持久化9.日志文件的拆分9.1官方文档9.2IDEA演示文件分割 10.日志格式的配置11.更简单的日志输入…...

编程日记 2025/5/10 23:22:53

PostgreSQL最常用数据类型-重点说明自增主键处理

简介 PostgreSQL提供了非常丰富的数据类型&#xff0c;我们平常使用最多的基本就3类&#xff1a; 数字类型字符类型时间类型 这篇文章重点介绍这3中类型&#xff0c;因为对于高并发项目还是推荐&#xff1a;尽量使用简单类型&#xff0c;把运算和逻辑放在应用中&#xff0c;…...

编程日记 2025/5/13 5:14:35

androidstudio 最新继承 proto kts 方式

在Android Studio中&#xff0c;如果你使用的是Kotlin DSL&#xff08;.kts文件&#xff09;来配置你的Gradle项目&#xff0c;并且你想集成Protocol Buffers&#xff08;Proto&#xff09;&#xff0c;你需要稍微调整你的配置方式。以下是如何在Kotlin DSL中配置Proto集成的步…...

编程日记 2025/5/5 0:40:37

【STM32学习】TB6612FNG驱动芯片的学习，驱动电路的学习

目录 1、TB6612电机驱动芯片 1.1如下是芯片的引脚图&#xff1a; 1.2如下图是电机的控制逻辑&#xff1a; 1.3MOS管运转逻辑 1.3典型应用电路 2、H桥驱动电路 2.1、单极模式 2.2、双极模式 2.3、高低端MOS管导通条件 2.4、H桥电路设计 2.5、自举电路 3、电气特性 3…...

编程日记 2025/5/11 14:52:17

【AI战略思考13】克服懒惰，保持专注，提升效率，不再焦虑

【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】【AI日记】 引言 我发现自己最近非常懒惰&#xff0c;浪费了很多时间&#xff0c;也容易分心&#xff0c;不够专注&#xff0c;效率低下&#xff0c;且每天都有点焦虑&#xff0c;因此制定了下面的要求和作息时间表。 目…...

编程日记 2025/5/12 17:48:05

基于Vue3+Element Plus 实现多表单校验

使用场景 表单校验在日常的开发需求中是一种很常见的需求&#xff0c;通常在提交表单发起请求前校验用户输入是否符合规则&#xff0c;通常只需formRef.value.validate()即可校验&#xff0c;但是&#xff0c;例如一些多步骤表单、动态表单、以及不同的用户角色可能看到不同的表…...

编程日记 2025/5/13 4:54:44

“岗位复合化、技能层次化” 高职大数据技术专业人才培养实践

在全球数字化浪潮的推动下&#xff0c;大数据技术已经成为引领社会进步和经济发展的核心动力。随着《关于深化现代职业教育体系建设改革的意见》等系列指导问文件的发布&#xff0c;我国高职大数据技术专业的教育正迎来全新机遇与挑战。这些政策不仅明确了职业教育改革的方向&a…...

编程日记 2025/5/10 8:29:21

Day2 生信新手笔记: Linux基础

一、基础知识 1.1 服务器 super computer 或 server 1.2 组学数据分析 组学数据&#xff1a;如基因组学、转录组学、蛋白质组学等&#xff1b; 上游分析&#xff1a;主要涉及原始数据的获取和初步处理&#xff0c;计算量大&#xff0c;消耗的资源较多&#xff0c;在服务器完…...

编程日记 2025/5/12 2:47:02

AI开发-数据可视化库-Seaborn

1 需求 概述 Seaborn 是一个基于 Python 的数据可视化库&#xff0c;它建立在 Matplotlib 之上。其主要目的是使数据可视化更加美观、方便和高效。它提供了高层次的接口和各种美观的默认主题&#xff0c;能够帮助用户快速创建出具有吸引力的统计图表&#xff0c;用于数据分析和…...

编程日记 2025/5/6 15:50:04

如何把Qt exe文件发送给其他人使用

如何把Qt exe文件发送给其他人使用 1、先把 Debug改成Release2、重新构建项目3、运行项目4、找到release文件夹5、新建文件夹&#xff0c;存放exe文件6、打开qt控制台串口7、下载各种文件8、压缩&#xff0c;发送压缩包给别人 1、先把 Debug改成Release 2、重新构建项目 3、运行…...

编程日记 2025/5/6 7:22:48

力扣103.二叉树的锯齿形层序遍历

题目描述 题目链接103. 二叉树的锯齿形层序遍历 给你二叉树的根节点 root &#xff0c;返回其节点值的 锯齿形层序遍历 。&#xff08;即先从左往右&#xff0c;再从右往左进行下一层遍历&#xff0c;以此类推&#xff0c;层与层之间交替进行&#xff09;。 示例 1&#xff…...

编程日记 2025/4/6 22:09:52

MOH: MULTI-HEAD ATTENTION AS MIXTURE-OFHEAD ATTENTION

当前的问题 多头注意力使用多个头部可以提高模型的精度。然而&#xff0c;并不是所有的注意力头都具有同样的重要性。一些研究表明&#xff0c;许多注意力头可以被修剪而不影响准确性。 此外&#xff0c;在多头注意中&#xff0c;每个注意头并行操作&#xff0c;最终输出是所…...

编程日记 2025/5/9 17:31:50

Linux的文件系统

这里写目录标题 一.文件系统的基本组成索引节点目录项文件数据的存储扇区三个存储区域 二.虚拟文件系统文件系统分类进程文件表读写过程 三.文件的存储连续空间存放方式缺点 非连续空间存放方式链表方式隐式链表缺点显示链接 索引数据库缺陷索引的方式优点&#xff1a;多级索引…...

编程日记 2025/5/11 1:25:42

力扣78题详解：C语言实现子集问题

力扣78题详解&#xff1a;C语言实现子集问题 题目描述 给定一个不含重复元素的整数数组 nums&#xff0c;返回其所有可能的子集&#xff08;幂集&#xff09;。 说明&#xff1a;解集不能包含重复的子集&#xff0c;顺序无关。 示例 输入&#xff1a;nums [1,2,3] 输出&am…...

编程日记 2025/5/8 17:08:30

按行数据拆分到工作表-Excel易用宝

有这样一份工作表&#xff0c;现在要对工作表按指定行数进行拆分&#xff0c;如果你还在选择数据区域复制粘贴到每个工作表中&#xff0c;那这样的效率也太低了。 按指定行数拆分工作表&#xff0c;就用易用宝。 单击Excel易用宝&#xff0c;合并与拆分&#xff0c;拆分工作表…...

编程日记 2025/5/12 7:05:19

.net core 创建linux服务，并实现服务的自我更新

目录 创建服务创建另一个服务&#xff0c;用于执行更新操作给你的用户配置一些systemctl命令权限 创建服务 /etc/systemd/system下新建服务配置文件&#xff1a;yourapp.service&#xff0c;内容如下&#xff1a; [Unit] Descriptionyourapp Afternetwork.target[Service] Ty…...

编程日记 2025/4/26 23:38:35

无人机的起降装置：探索起飞和降落的秘密 ！

一、起降系统的运行方式 起飞方式 垂直起飞&#xff1a;小型无人机通常采用垂直起飞方式&#xff0c;利用螺旋桨产生的升力直接从地面升起。这种方式适用于空间有限或需要快速起飞的场景。 跑道起飞&#xff1a;大型无人机或需要较长起飞距离的无人机&#xff0c;可能会采用…...

编程日记 2025/5/12 2:46:46

Apache Airflow 快速入门教程

Apache Airflow已经成为Python生态系统中管道编排的事实上的库。与类似的解决方案相反&#xff0c;由于它的简单性和可扩展性&#xff0c;它已经获得了普及。在本文中&#xff0c;我将尝试概述它的主要概念&#xff0c;并让您清楚地了解何时以及如何使用它。 Airflow应用场景 …...

编程日记 2025/5/9 1:46:49

数学题转excel；数学题库；数学试卷转excel；大风车excel

一、数学试卷转excel 有些需要刷题的朋友&#xff0c;需要将题库数学题转为excel格式&#xff0c;便于管理 前端时间帮一位朋友实现了数学题转excel&#xff0c;包括选择题、填空题、分析题 示例&#xff1a; 二、问题 数学题是最难以处理的试题&#xff0c;理由如下 1、有…...

编程日记 2025/5/11 10:07:41

【C++】类和对象（下）

目录 前言 一、再探构造函数 二、类型转换 三、static 成员 四、友元 五、内部类 六、匿名对象 七、对象拷贝时的编译器优化 总结 前言 本文主要内容&#xff1a;构造函数的再探--初始化列表、内置类型与自定义类型之间的转换、类的static成员、友元、内部类、匿名对…...

编程日记 2025/5/7 17:14:14

vue多页面应用集成时权限处理问题

在多页面应用&#xff08;MPA&#xff09;中&#xff0c;权限管理通常会涉及到每个页面的访问控制、身份验证、以及权限校验。以下是几种常见的权限处理方式&#xff1a; 1. 前端路由权限控制 原理&#xff1a;虽然是多页面应用&#xff0c;通常每个页面会独立加载和渲染&…...

编程日记 2025/5/7 20:22:34

输出保留3位小数的浮点数

输出保留3位小数的浮点数 C语言代码C代码Java代码Python代码 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 读入一个单精度浮点数&#xff0c;保留3位小数输出这个浮点数。 输入 只有一行&#xff0c;一个单精度浮点数。 输出 也只有一…...

编程日记 2025/5/10 12:10:38

openssl的运用

一、概述 Opssl是一个用于TLS/SSL协议的工具包&#xff0c;也是一个通用密码库。 包含了国密sm2 sm3 sm4&#xff0c;包含了对称加密&#xff0c;非对称加密&#xff0c;单项散列&#xff0c;伪随机、签名&#xff0c;密码交换&#xff0c;证书等一些算法库。 为了深层次的学习…...

编程日记 2025/5/11 22:50:16

C++STL之vector（超详细）

CSTL之vector 1.vector基本介绍2.vector重要接口2.1.构造函数2.2.迭代器2.3.空间2.3.1.resize2.3.2.capacity 2.4.增删查找 3.迭代器失效4.迭代器分类 &#x1f31f;&#x1f31f;hello&#xff0c;各位读者大大们你们好呀&#x1f31f;&#x1f31f; &#x1f680;&#x1f68…...

编程日记 2025/5/5 8:22:27

RabbitMQ消息可靠性保证机制5--消息幂等性处理

RabbitMQ层面有实现“去重机制”来保证“恰好一次”吗&#xff1f;答案是没并没有&#xff0c;而且现在主流的消息中间件都没有实现。 一般解决重复消息的办法是&#xff1a;在消费端让我们消费消息操作具有幂等性。 幂等性问题并不是消息系统独有&#xff0c;而是&#xff0…...

编程日记 2025/5/12 2:47:47

24/12/1 算法笔记＜强化学习＞ 创建Maze交互

我们今天制作一个栅格的游戏。 我们直接上代码教学。 1.载入库和查找相应的函数版本 import numpy as np import time import sysif sys.version_info.major 2:import Tkinter as tk else:import tkinter as tk 2.设置长宽和单元格大小 UNIT 40 MAZE_H 4 MAZE_W 4 3.初始…...

编程日记 2025/5/11 14:08:29

c++：模版 template

一、模版 1.格式&#xff1a; template <typname T> 2.实现 2.1自动推导 模板只对紧跟在后面的第一行代码有效&#xff0c;如果后面还想定义模板函数需要重新定义模板 #include <iostream> #include <string>template <typename T> void Print(T v…...

编程日记 2025/5/12 4:04:38

javascript切换类、删除类、修改类以及增加类

在JavaScript中&#xff0c;操作DOM元素的类&#xff08;class&#xff09;是一个常见的操作。以下是一些基本的方法来切换类、删除类、修改类以及增加内联样式&#xff1a; 切换类&#xff08;Toggle Class&#xff09; 切换类意味着如果类存在则移除它&#xff0c;如果不存…...

编程日记 2025/5/11 3:01:38

区块链学习笔记(2)--区块链的交易模型part1

模型基础 区块链的tx分为两种模型&#xff0c;分别是比特币为代表的UTXO&#xff08;Unspent Transaction Output&#xff09;模型&#xff0c;和以太坊为代表的Account模型。前者适用于货币记账&#xff0c;后者适用于链上应用。 UTXO模型 类似于现金的交易模型 一个tx包含…...

编程日记 2025/5/9 23:00:11

反射知识总结

狂神说 反射的功能&#xff1a; 类加载内存分析 类加载的时候&#xff0c;class对象就形成了。 类无论有多少对象&#xff0c;class对象只有一个。 获取类对象三种方式 反射&#xff0c;就是通过api获取一个类的类对象&#xff1a; 有三种方式&#xff1a; 方法一&#xf…...

编程日记 2025/5/6 13:14:30

selenium部署分布式 UI 自动化测试环境-Docker

一、根据selenium/hub官网的配置信息&#xff0c;进行配置。 How to run this image The Hub and Nodes will be created in the same network and they will recognize each other by their container name. A Docker network⁠ needs to be created as a first step.Create …...

编程日记 2025/5/8 9:24:51

算法刷题Day5: BM52 数组中只出现一次的两个数字

描述&#xff1a; 一个整型数组里除了两个数字只出现一次&#xff0c;其他的数字都出现了两次。请写程序找出这两个只出现一次的数字。 要求&#xff1a;空间复杂度 O(1)&#xff0c;时间复杂度O(n)。 题目传送门 is here 思路&#xff1a; 方法一&#xff1a;最简单的思路就…...

编程日记 2025/5/13 1:46:25

使用docker-compose部署搜索引擎ElasticSearch6.8.10

背景 Elasticsearch 是一个开源的分布式搜索和分析引擎&#xff0c;基于 Apache Lucene 构建。它被广泛用于实时数据搜索、日志分析、全文检索等应用场景。 Elasticsearch 支持高效的全文搜索&#xff0c;并提供了强大的聚合功能&#xff0c;可以处理大规模的数据集并进行快速…...

编程日记 2025/5/10 5:52:01

多线程篇-5--线程分类（线程类型，springboot中常见线程类型，异步任务线程）

常见的线程类型包括用户线程&#xff08;User Threads&#xff09;、守护线程&#xff08;Daemon Threads&#xff09;、主线程&#xff08;Main Thread&#xff09;、工作线程&#xff08;Worker Threads&#xff09;和线程池中的线程。 一、用户线程&#xff08;User Thread…...

编程日记 2025/5/9 2:50:48

详解高斯消元

详解高斯消元 好东西，可以求所有一次方程组的解。 \color {red} 好东西，可以求所有一次方程组的解。 好东西，可以求所有一次方程组的解。 前置知识 一般消元法的公理： 两方程互换，解不变； 一方程乘以非零数 k k k，解不变； 一方程乘以数 k k k加上另一方程，解不变。 …...

编程日记 2025/5/10 4:00:38

【Python网络爬虫笔记】5-(Request 带参数的get请求) 爬取豆瓣电影排行信息

目录 1.抓包工具查看网站信息2.代码实现3.运行结果 1.抓包工具查看网站信息 请求路径 url:https://movie.douban.com/typerank请求参数 页面往下拉&#xff0c;出现新的请求结果&#xff0c;参数start更新&#xff0c;每次刷新出20条新的电影数据 2.代码实现 # 使用网络爬…...

编程日记 2025/5/11 20:48:21

泷羽sec- shell编程（8） until循环以及函数基本创建调用 学习笔记

声明&#xff01; 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章&#xff0c;笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他均与本人以及泷羽sec团队无关&a…...

编程日记 2025/5/12 3:54:51