反応とVueによる再帰的リストレンダリング

時々、あなたのリストはそれの中にもう一つのサブリストを持つかもしれない内部のサブリストを持っているかもしれません.

その場合、単純なループは動きません.再帰を使わなければなりません.

それで、我々がどう反応するJSを使っている再帰的なリストを与えることができるか見てみましょう.
JSXをサポートしているので、通常のJavaScript関数を使用することができますので、単に再帰関数を使用することができます.

//App.js
function App(){
    const list = [
        { type: "item", title: "Wakeup", color: "blue" },
        { type: "item", title: "Get Fresh", color: "blue" },
        { type: "item", title: "Study", color: "blue" },
        {
            type: "list",
            items: [
                { type: "item", title: "Study JavaScript", color: "green" },
                { type: "item", title: "Study OOP", color: "green" },
                {
                    type: "list",
                    items: [
                        { type: "item", title: "Make game using OOP", color: "red" }
                    ]
                },
                { type: "item", title: "Study NodeJs", color: "green" },
            ]
        }
    ]

    function renderList(list){
        const listTree = list.map(item => {
            if(item.type == "item"){
                return (
                    <div className="list-item">
                        <span className="border" style={{background: item.color}}></span>
                        <span className="title">{ item.title }</span>
                    </div>
                )
            }else{
                return (
                    <div className="list">
                        { renderList(item.items) }
                    </div>
                )
            }
        })
        return (
            <div className="list">
                { listTree }
            </div>
        )
    }

    return (
        <div>
            <h1>My Nested ToDo List-</h1>
            { renderList(list) }
        </div>
    )
}

export default App

CSSのスタイルによってはこのように見えます.


ではVue jsで再帰的なリストを表示する方法を見てみましょう.
今、私たちが反応したようにVueで再帰的なJavaScript関数を使用することはできませんが、再帰的なコンポーネントを使用できます.

コンポーネントを再帰的に使用するには、名前を正しく指定する必要があります!!!
アプリ.Vue

<template>
    <div>
        <h1>My Nested ToDo List-</h1>
        <RenderList :list="list" />
    </div>
</template>
<script>
import RenderList from "./components/RenderList.vue"
export default {
    components: {
        RenderList
    },
    data: () => ({
        list: [
            { type: "item", title: "Wakeup", color: "blue" },
            { type: "item", title: "Get Fresh", color: "blue" },
            { type: "item", title: "Study", color: "blue" },
            {
                type: "list",
                items: [
                    { type: "item", title: "Study JavaScript", color: "green" },
                    { type: "item", title: "Study OOP", color: "green" },
                    {
                        type: "list",
                        items: [
                            { type: "item", title: "Make game using OOP", color: "red" }
                        ]
                    },
                    { type: "item", title: "Study NodeJs", color: "green" },
                ]
            }
        ]
    })
}
</script>

renderlistVue

<template>
    <div class="list">
        <div v-for="item in list" :key="item.title" :class="{'list': item.type == 'list', 'list-item': item.type == 'item'}">
            <span v-if="item.type == 'item'" class="border" :style="{background: item.color}"></span>
            <span v-if="item.type == 'item'" class="title">{{ item.title }}</span>
            <RenderList v-if="item.type == 'list'" :list="item.items" />
        </div>
    </div>
</template>
<script>
export default {
    name: "RenderList",
    props: ['list']
}
</script>

CSSのスタイルによってはこのように見えます.

私の他の記事やYouTubeチャンネルをチェックアウトしてください.
・・・アクションボタン
背景色:こっち重要
カラー:竜華ffffff!重要
ボーダーカラー:こっち重要
｝

Shuvoに続く
Frontend Developer and YouTuber. Channel link: https://www.youtube.com/c/AngleBrace