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

在这里插入图片描述

1. 需求场景

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

2. 返回的数据

输入图片说明

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

3. 实现效果

输入图片说明

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

4. react 实现

由于 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>