实现组件的递归渲染

1. 需求场景

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

2. 返回的数据

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

3. 实现效果

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

4. react 实现

由于 react 使用的是函数组件开发，这个实现就比较简单，必定函数的递归对于我们来说，都很简单，就像使用 setTimeout 实现倒计时，就是函数的递归。

4.1 实现代码

javascript 复制代码

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 实现代码

xml 复制代码

<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. 总结

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