【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. 我这里单纯的实现的纯展示组件,如果需要事件和其他的,就需要在处理其他的问题。
相关推荐
IT_陈寒3 分钟前
SpringBoot 3.0实战:这套配置让我轻松扛住百万并发,性能提升300%
前端·人工智能·后端
♡喜欢做梦4 分钟前
Spring Web MVC 入门秘籍:从概念到实践的快速通道(上)
前端·spring·mvc
Dragon Wu11 分钟前
Taro 自定义tab栏和自定义导航栏
前端·javascript·小程序·typescript·前端框架·taro
艾小码18 分钟前
2025年前端菜鸟自救指南:从零搭建专业开发环境
前端·javascript
namekong85 小时前
清理谷歌浏览器垃圾文件 Chrome “User Data”
前端·chrome
开发者小天6 小时前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
李少兄9 小时前
HTML 表单控件
前端·microsoft·html
学习笔记10110 小时前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-194310 小时前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
曹牧10 小时前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#