【react 和 vue】 ---- 实现组件的递归渲染

在这里插入图片描述

1. 需求场景

今天遇到了一个需求,就是 HTML 的递归渲染。问题就是商品的可用时间,使用规则等数据是后端配置,然后配置规则则是可以无限递归的往下配置,可以存在很多级。后端实现后,数据返回前端,就需要前端渲染,由于不知道在那一层结束,因此也不能使用几层循环,因为没有确定的层数,因此就出现渲染层也出现递归渲染,当然这个其实没有什么难度,主要是之前没有遇到过这种需求,因此感觉比较有趣,实现了功能,就把它记录一下。

2. 返回的数据

输入图片说明

返回数据中 children 就是可以无限往下配置的层级数据!

3. 实现效果

输入图片说明

每一层级比前一层级提行15px,样式都差不多,简化了,之前还有图标什么的,由于后端不能配置图标,所以去掉图标!

4. react 实现

  1. 由于 react 使用的是函数组件开发,这个实现就比较简单,必定函数的递归对于我们来说,都很简单,就像使用 setTimeout 实现倒计时,就是函数的递归。
4.1 实现代码
function getChildrenChildHtml(item){if(item?.children?.length){return <View><View className='rui-fs26'>{item.des}</View><View className='rui-ml15'>{ item?.children?.map(getChildrenChildHtml) }</View></View>}return <View className='rui-fs26'> <Text>{item.des}</Text><Text className='rui-ml15'>{item.value}</Text></View>
}

说明:由于要求最后一级需要获取 value 属性的值进行展示,因此最后一级单独处理!

5. vue 实现

为什么要记录 vue 和 react 分开呢?因为移动端使用的 react,后端管理平台使用的 vue2 写的,所以也需要使用 vue 的组件再实现一次相同的逻辑。

5.1 实现代码
<template><div style="font-size: 12px;line-height: 18px;"><div v-if="info && info.children && info.children.length"><div>{{info.content || info.des}}</div><div v-for="(child) in info.children" :key="child.des" class="rui-ml15"><RuleList :info="child"/></div></div><div v-else><span>{{info.content || info.des}}</span><span class="rui-ml15" v-if="info.value">{{ info.value }}</span></div></div>
</template>
<script>
export default {name: 'RuleList',props: {info: {type: Object,default: () => ({})}}
}
</script>
<style scoped>
.rui-ml15{margin-left: 15px;}
</style>
5.2 注意

输入图片说明

就是在组件内调用它自己,但是需要注意,由于我这里只是纯展示组件,没有事件的处理

5.3 返回数据

输入图片说明

5.4 实现效果

输入图片说明

6. 总结

  1. 其实实现没有什么难度,主要是之前没有遇到类似的需求,因此觉得挺有趣的,记录一下实现的过程。
  2. 我这里单纯的实现的纯展示组件,如果需要事件和其他的,就需要在处理其他的问题。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/455508.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一招教你解决Facebook广告账号问题

这段时间&#xff0c;我们写了很多文章来探讨Facebook的广告账户问题&#xff1a;《Facebook被封号该怎么办》《Facebook二不限、三不限账号是什么》《Facebook海外户&#xff08;三不限&#xff09;和账单户该如何选择》《如何区分真假Facebook三不限海外户》相信看过这些文章…

【传知代码】智能推荐与隐私保护的融合(论文复现)

本文将深入探讨这样一种系统的设计理念、关键技术以及其在实际应用中的潜力和优势。通过探索如何在保证个性化推荐效果的同时&#xff0c;有效保护用户隐私&#xff0c;我们将揭示出一种新兴的技术趋势&#xff0c;为未来智能化应用的发展开辟新的可能性。 目录 概述 项目设计…

基于SSM+小程序的就业管理系统(就业1)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 学生实习与就业管理系统的设计与实现管理员、辅导员管理、企业管理、工作管理人、用户管理5个角色。 1、管理员实现了基础数据管理、辅导员管理、企业管理、工作管理人管理、公告信息管理…

js 填充数组

let arr Array.from({ length: 10 }, (_, index) > index)console.log(arr) 人工智能学习网站 https://chat.xutongbao.top

如何用示波器检测次级点火系统(一)

写在最前面&#xff1a; 单看标题可能会让你觉得这篇文章的主题是关于检测线圈&#xff0c;火花塞和火花塞插头电线。但我们指的是分析燃烧室内电子的行为。目标是看燃料混合物&#xff0c;阀座&#xff0c;压缩&#xff0c;积碳和其它影响这种特性的症状。最终目的是要学会分…

FIR数字滤波器在MATLAB中的实现

摘要 数字滤波器是由数字乘法器、加法器和延时单元组成的一种装置。数字滤波器的功能是对输入离散信号的数字代码进行运算处理&#xff0c;以达到改变信号频谱的目的。近年来数字滤波在通信、图像编码、语言编码、雷达等许多领域中有着十分广泛的应用。 本文首先介绍了数字滤波…

为什么诺贝尔物理学奖颁给了 AI 大神

瑞典皇家科学院刚宣布&#xff0c;科学家约翰霍普菲尔德&#xff08;John J. Hopfield) 和杰弗里辛顿 (Geoffrey E. Hinton) 荣膺 2024年诺贝尔物理学奖&#xff0c;以表彰他们通过人工神经网络 (ANN) 实现机器学习而作出的基础性发现和发明 (for foundational discoveries and…

程序员:代码世界的探险家与日常“救火队员”

在这个被数字与代码编织的时代&#xff0c;程序员&#xff0c;这一群看似平凡却又不凡的“数字工匠”&#xff0c;正用他们的智慧与汗水&#xff0c;构建着我们生活的每一个角落。值此1024程序员节之际&#xff0c;让我们以轻松幽默的方式&#xff0c;一同走进程序员的世界&…

8轴/4轴的EtherCAT轴模块EIO24088G-V2及EIO16084G的使用(一):TwinCAT总线配置与使用

上节课给大家介绍了 EIO24088-V2及EIO16084结合RTSys进行总线配置与使用&#xff0c;详情请点击→8轴/4轴的EtherCAT轴模块EIO24088-V2及EIO16084的使用&#xff08;一&#xff09;&#xff1a;RTSys总线配置与使用。 今天正运动给大家分享一下EIO24088G-V2及EIO16084G如何用T…

DNS安全概述

一、DNS的解析过程 1.递归解析 递归解析是一种由DNS客户端&#xff08;通常是用户的应用程序&#xff0c;如一个浏览器&#xff09;向本地DNS解析器发出解析请求&#xff0c;然后本地DNS解析器负责查询最终结果并将结果返回给客户端&#xff0c;而中间的所有查询请求都由本地D…

Unity之如何在物体空间中制作马赛克

文章目录 前言屏幕空间马赛克着色器对象空间中的马赛克着色器最后前言 GrabPass 允许您创建应用马赛克叠加的着色器。如果你想在屏幕空间中应用马赛克,你可以通过使用片段着色器对其进行离散化来实现,但我在尝试将其应用到对象空间时遇到了问题,所以这是一个记录。 ▼ 原图…

proteus中没有STM32F103C8(已解决)

想在proteus找一个和开发板相同的芯片型号STM32F103C8T6&#xff0c;亲测proteus的7.8、8.6、8.9版本都没有STM32F103C8&#xff0c;然后在proteus8.15中找到了&#xff0c;M4内核的芯片也有。 M3内核&#xff1a; M4内核&#xff1a;

新脉集团携手中宏大数据 共推县域乡村振兴与数据资产化

2024年10月23日&#xff0c;数字生态赋能平台新脉集团与中宏大数据产业有限责任公司正式宣布达成战略合作。新脉集团创始人兼CEO李晶、新脉集团联合创始人兼CSO梁钟、新脉集团首席城市战略顾问邓详达、新脉中医健康教育学院院长王庆辉以及中宏大数据产业有限责任公司总裁张春宝…

053_python基于深度学习的短视频内容理解与推荐系统

目录 系统展示 开发背景 代码实现 项目案例 获取源码 博主介绍&#xff1a;CodeMentor毕业设计领航者、全网关注者30W群落&#xff0c;InfoQ特邀专栏作家、技术博客领航者、InfoQ新星培育计划导师、Web开发领域杰出贡献者&#xff0c;博客领航之星、开发者头条/腾讯云/AW…

ZYNQ PS_GPIO中断

REVIEW zynq PS端 GPIO_zynq modem signal-CSDN博客 C基础与SDK调试方法_csdk-CSDN博客 AXI_GPIO_axigpio-CSDN博客 对于GPIO&#xff0c;前面只用了简单读写&#xff0c;今天搞一下中断 1. 今日摸鱼任务 了解中断原理&#xff0c;实现PS_GPIO中断。 MIIO: #define PS_KEY 47#…

零售行业的数字化营销转型之路

一方面&#xff0c;市场竞争激烈&#xff0c;电商平台、新兴品牌和跨界对手带来巨大压力。另一方面&#xff0c;消费者需求变化迅速&#xff0c;更加追求个性化、多元化和便捷化的购物体验&#xff0c;同时传统零售企业还面临着高成本压力&#xff0c;如租金、人力和库存等。 然…

Chainlit集成LlamaIndex和Chromadb实现RAG增强生成对话AI应用

前言 本文主要讲解如何使用LlamaIndex和Chromadb向量数据库实现RAG应用&#xff0c;并使用Chainlit快速搭建一个前端对话网页&#xff0c;实现RAG聊天问答增强的应用。文章中还讲解了LlamaIndex 的CallbackManager回调&#xff0c;实现案例是使用TokenCountingHandler&#xf…

Pollard‘s p-1算法

概述 光滑数 (Smooth number)&#xff1a;指可以分解为多个小素数乘积的正整数 当p是N 的因数&#xff0c;并且p−1是光滑数&#xff0c;可以考虑使用Pollards p-1算法来分解N 当p是N的因数&#xff0c;并且p1是光滑数&#xff0c;可以考虑使用Williamss p1算法来分解N 这里…

程序员节-回顾篇

回顾&#xff1a; 时间如白驹过隙&#xff0c;转眼间&#xff0c;我们又走过了一个充满挑战与机遇的年份。回顾过去的一年&#xff0c;心中充满了感慨与收获。 一、个人成长 这一年里&#xff0c;我在各个方面都有了显著的成长。在工作上&#xff0c;我通过不断学习和实践&a…

【小洛的VLOG】Web 服务器高并发压力测试(Reactor模型测试)

目录 引言 工具介绍 环境介绍 测试结果 个人主页&#xff1a;东洛的克莱斯韦克-CSDN博客 引言 大部分的网络通信都是支持TCP/IP协议栈&#xff0c;为了保证通信的可靠性&#xff0c;客户端和服务端之间需要建立链接。服务端能并发处理多少个链接&#xff0c;平均每秒钟能处理…