Рекурсия и js-фреймворки
Как насчёт динамического меню когда глубина вложенности неизвестна? Пример из жизни — сайдбар. Под катом реализация для React и Vue.
В качестве мока используем данные из trees.js.
// tree.js
const tree = [
{ name: 'Level 1.1' },
{
name: 'Level 1.2',
children: [
{ name: 'Level 2.1' },
{ name: 'Level 2.2' }
]
},
{
name: 'Level 1.3',
children: [
{ name: 'Level 2.3' },
{ name: 'Level 2.4' },
{
name: 'Level 2.5',
children: [
{ name: 'Level 3.1' },
{
name: 'Level 3.2',
children: [
{ name: 'Level 4.1' },
{ name: 'Level 4.2' }
]
},
{ name: 'Level 3.3' }
]
}
]
}
]
export default tree
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
# React
Создать новый проект.
$ npx create-react-app new-project
$ cd new-project
$ npm run start
2
3
Структура проекта:
.
├── src
│ ├── App.js
│ ├── components
│ │ ├── Sidebar.js
│ │ └── SidebarItem.js
│ ├── index.js
│ └── tree.js
└── public
2
3
4
5
6
7
8
9
App.js
Точка входа. Здесь будеть жить сайдбар и функция handleClick,
которая сможет принять данные при клике на любой элемент из списка.
import React from 'react'
import tree from './tree'
import Sidebar from './components/Sidebar'
function handleClick (e) {
e.preventDefault();
// При клике на любой пункт вывести название пункта
console.log(e.target.textContent)
}
export default function App() {
return <Sidebar items={tree} handleClick={handleClick} />
}
2
3
4
5
6
7
8
9
10
11
12
13
Sidebar.js
Обойти список. Передать элементы первого уровня в качестве props для SidebarItem.
import React from 'react'
import SidebarItem from './SidebarItem'
export default function Sidebar({ items, handleClick }) {
return (
<div className="sidebar">
<ul className="sidebar-list">
{items.map((sidebarItem, index) => (
<SidebarItem
key={`${sidebarItem.name}-${index}`}
handleClick={handleClick}
{...sidebarItem}
/>
))}
</ul>
</div>
)
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
SidebarItem.js
Отобразить имена элементов первого уровня. Проверить наличие вложенных
уровней и, если они есть, вернуть SidebarItem снова, передав ему новый список (рекурсия в действии).
import React from 'react'
const styles = {
btn: {
border: 0,
outline: 'none'
}
}
export default function SidebarItem({ name, children, handleClick, ...rest }) {
return (
<>
<li {...rest}>
<button style={{ ...styles.btn }} onClick={handleClick}>
<span>{name}</span>
</button>
</li>
{Array.isArray(children) ? (
<ul>
{children.map((subItem) => (
<SidebarItem
key={subItem.name}
handleClick={handleClick}
{...subItem}
/>
))}
</ul>
) : null}
</>
)
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
# Vue
Vue отличается от React своей магией. Не всегда очевидно то, что фреймворк хранит «под капотом», но порой эта магия может упростить жизнь. Но не в этом случае. Логика аналогична той, что мы писали выше.
Создадим новый проект. Для простоты сделаем это с vue-cli.
$ npx @vue/cli create new-project
$ cd new-project
$ npm run serve
2
3
Структура проекта:
.
├── public
└── src
├── App.vue
├── components
│ ├── Sidebar.vue
│ └── SidebarItem.vue
├── main.js
└── tree.js
2
3
4
5
6
7
8
9
App.vue
Точка входа. Подключим компоненты и прокинем данные.
<template>
<div id="app">
<sidebar :data="tree" @handleClick="handleClick" />
</div>
</template>
<script>
import tree from './tree'
import Sidebar from './components/Sidebar'
export default {
name: 'app',
data () {
return {
tree
}
},
components: {
Sidebar
},
methods: {
handleClick (node) {
console.log('Clicked: ', node.name)
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Sidebar.vue
Обойти список. Передать элементы первого уровня в качестве props для SidebarItem.
<template>
<ul>
<li v-for="node in data" :key="`${node.name}`">
<sidebar-item :node="node" :handleClick="handleClick" />
</li>
</ul>
</template>
<script>
import SidebarItem from './SidebarItem'
export default {
name: 'sidebar',
props: {
data: {
type: Array,
required: true
}
},
components: {
SidebarItem
},
methods: {
handleClick (node) {
this.$emit('handleClick', node)
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
SidebarItem.vue
Отобразить имена элементов первого уровня (node.name). Проверить наличие вложенных уровней (node.children) и, если они есть, вернуть этот же компонент снова, передав ему новый список.
В отличие от React, где есть такая сущность как фрагмент, для Vue 2.x пока нельзя обойтись
без обёртки — div. Ходят слухи, что в третьей версии фрагменты тоже появятся.
<template>
<div>
<button class="label" @click="handleClick(node)">{{ node.name }}</button>
<ul v-if="node.children && node.children.length">
<sidebar-item
v-for="(child, index) in node.children"
:key="index"
:node="child"
:handleClick="handleClick"
/>
</ul>
</div>
</template>
<script>
export default {
name: 'sidebar-item',
props: {
node: { type: Object, required: true },
handleClick: { type: Function, default: () => {} }
}
}
</script>
<style scoped>
.label {
border: 0;
outline: 'none';
}
</style>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
