在小程式當中渲染樹

小影影發表於2022-04-09

我們可以很輕鬆的去遍歷一棵樹，無論是廣度優先遍歷還是深度優先遍歷，那麼怎麼在小程式當中渲染一棵樹呢？

先看一下我們深度優先遍歷的程式碼

function dfs(tree) {
    if(!tree) return
    console.log(tree.value)
    if (tree.children) {
        for(let i = 0; i < tree.children.length; i++) {
            dfs(tree.children[i])
        }
    }
}

可以看出，深度優先遍歷的演算法是利用遞迴，判斷是否此節點有children屬性，如果有就再次遞迴。

那麼，我們小程式是不是可以定義一個元件，然後，這個元件接收一個object，然後在此元件內，判斷object是否有children，如果有，就迴圈呼叫此元件，是不是就可以了呢？

下面我們來試一試。首先，我們來寫一個元件，名字叫做 TreeNode，會接收一個引數 treeVal

<view>
    {{treeVal.value}}
    <view wx:if="treeVal.children" class="children_con">
        <block wx:for="{{treeVal.children}}">
            <TreeNode treeVal="{{item}}"></TreeNode>
        </block>
    </view> 
</view>

JS部分

Component({
    properties: {
        treeVal: Object
    }
})

CSS部分

.children_con {
    padding-left: 50rpx;
}

是不是很簡單就實現了呢？

 

相關文章