微信小程序递归实现留言板

先说下思路：我会分为两个组件，commentdetail和treeItem两个组件，我们会在commentdetail调用treeItem这个子组件，循环留言的children数据，把children数组的每个item传给这个子组件，这个子组件再进行显示，然后子组件再调用自己，也就是treeItem调用treeItem这个组件，然后一直循环调用自己，直到没有children时停止。

commentdetail.wxml代码模块

 <view style="margin-left: 15px">
        <view
                wx:for="{{CommentList.replyList}}"  <!--循环的数据-->
                wx:for-item="node"
                style="margin-top: 10px;"
                wx:key="*this"
        >
            <view style="display: flex;flex-direction: row;">
                <view>
                    <image src="{{node.user.avatarUrl}}"
                           style="width: 40px;height: 40px;border-radius: 50rpx"></image>
                </view>

                <view style="display: flex;flex-direction: column;margin-left:10px;width: 100%">
                    <text style="font-size: 14px;font-weight: bold">{{node.user.nickName}}</text>
                    <text style="font-size: 12px;color: gray">{{node.createTime}}</text>
                    <view style="margin-top: 10px">
                        {{node.content}}
                    </view>
                </view>
                <view style="flex: 1"/>
                <view
                        class="iconfont icon-dianzan"
                        bindtap="like"
                        style="font-size: 20px;margin-right: 10px"
                />
            </view>
<!--再对于item的replyList进行循环，然后把循环后的item传给tree这个组件-->
              <tree wx:for="{{node.replyList}}" node="{{item}}"></tree>
        </view>
    </view>

treeItem.wxml代码模块

<!--回复-->
<view style="margin-top: 10px">
        <view style="display: flex;flex-direction: row;">
            <view>
                <image src="{{node.user.avatarUrl}}"
                       style="width: 40px;height: 40px;border-radius: 50rpx"></image>
            </view>

            <view style="display: flex;flex-direction: column;margin-left:10px;width: 100%">
                <text style="font-size: 14px;font-weight: bold">{{node.user.nickName}} 回复 {{node.parentName}}</text>
                <text style="font-size: 12px;color: gray">{{node.createTime}}</text>
                <view style="margin-top: 10px">
                    {{node.content}}
                </view>
            </view>
            <view style="flex: 1"/>
            <view
                    class="iconfont icon-dianzan"
                    bindtap="like"
                    style="font-size: 20px;margin-right: 10px"
            />
        </view>
<!--自己调用自己，如果这个item还有replyList就在进行调用-->
        <tree wx:for="{{node.replyList}}" node="{{item}}"></tree>
</view>

treeItem.js代码模块

// treeItem/treeItem.js
Component({
    /**
     * 组件的属性列表
     */
//从父组件传递过来的值
    properties: {
        node: Object
    },

    /**
     * 组件的初始数据
     */
    data: {

    },

    /**
     * 组件的方法列表
     */
    methods: {

    }
})