树形结构的数据渲染问题（下面是个类似朋友圈回复的渲染）

页面要实现的效果图：

开始静态页面是写了二层数组的遍历渲染方式，想偷懒就将数据进行处理（这里是小程序）：
wxml：页面用到了一些组件方法，这里不说这个，主要说渲染此类数据的方式，重点的dom代码在“回复盒子”下面

<view class="consultBox" wx:for="{{consultList}}" wx:key="{{index}}">
        <view>
          <image src="{{item.userAvatar}}"></image>
        </view>
        <view>
          <view class="co-up">
            <view>
              <text>{{item.userNickName}}</text>
              <text>{{item.createTime}}</text>
            </view>
          </view>
          <view class="co-down" wx:if="{{commentsHid && item.content.length > 20}}">
            {{(textUtil.substring(item.content, 0, 20) + '...')}}
            <text bindtap="palyMore">展开更多</text>
            <van-icon name="arrow-down" size="18rpx" color="#6DB2ED" />
          </view>
          <view class="co-down" wx:if="{{!commentsHid && item.content.length > 20}}">
              {{item.content}}
          </view>
          <view class="co-down" wx:if="{{item.content.length<20}}">
              {{item.content}}
          </view>
          <view class="consultsCounts">
            <view bindtap="commentingDisplayTwo" id="{{item.id}}">
              <van-icon name="comment-o" />
              <text>{{item.children.length> 0?item.children.length:'0'}}</text>
            </view>
            <view catchtap="favor" id="{{item.code}}" data-state="{{item.isFavor}}">
              <van-icon name="good-job-o" color="{{item.isFavor==false?'':'#B40000'}}" />
              <text>{{item.favorNum}}</text>
            </view>
          </view>
          <!-- 回复盒子 -->
          <view class="replyBox" wx:if="{{item.children && item.children.length > 0}}">
            <view class="replyListBox" wx:for="{{item.children}}" wx:for-item="replyList" wx:key="{{index}}">
              <text>{{replyList.userNickName}}回复{{replyList.beReplyName}}:</text>
              <text bindtap="commentingDisplayTwo" id="{{replyList.id}}">{{replyList.content}}</text>
            </view>
          </view>
        </view>

js数据处理：

		this.setData({
            consultList: res.data
          })
          // 递归出所有子集评论
          res.data.map((item,index) => {
            if (item.hasChild) {
              item.children.map((item) => { // 从第三层开始
                this.chooseChild(item, index)
              })
            }
          })

chooseChild (box, index) { // 收集回复子集方法
    if (!box.hasChild) {
      return false
    } else {
      box.children.map((item) => {
        this.data.consultList[index].children.push({
          userNickName: item.userNickName,
          beReplyName: item.beReplyName,
          content: item.content,
          id: item.id
        })
        this.chooseChild(item, index)
      })
      this.setData({
        consultList: this.data.consultList,
      })
    }
  },

下次记录怎么使用小程序模板遍历树形数据的方式0.0