Создать дерево каталогов в React

Question

Создать дерево каталогов в React

Я работаю над музыкальным плеером с использованием electron и решил попробовать react, но я застрял на создании дерева каталогов.

Я использую readdirp для рекурсивного получения всех каталогов, но я понятия не имею, как построить дерево; readdirp создает массив объектов со следующими свойствами:

// dir.fullPath      :  'D:/Music/Artist/Album/name',

// dir.fullParentDir :  'D:/Music/Artist/Album',

// dir.path          :  'Artist/Album/name',

// dir.parentDir     :  'Artist/Album',

// dir.name          :  'name',

Древовидная структура:

D:/Music/Artist1

D:/Music/Artist1/Album1

D:/Music/Artist1/Album1/cd1

D:/Music/Artist1/Album1/cd2

D:/Music/Artist1/Album2

D:/Music/Artist2

D:/Music/Artist2/Album1

D:/Music/Artist2/Album2

С помощью vanilla JS я делаю цикл над массивом:

На 1-й итерации я создаю элемент с id=D: / Music / Artist1 (dir.fullPath), я ищу элемент с id=D: / Music / (реж.fullParentDir), он не существует, поэтому я добавляю элемент к элементу по умолчанию.

2-я итерация я создаю элемент с id=D: / Music / Artist1 / Album1, я ищу элемент с id=D:/Music/Artist1, он существует, поэтому я добавляю его в найденный элемент.

Это дает мне правильную вложенность.

<div id="default">

    <div id="D:/Music/Artist1">

        <div id="D:/Music/Artist1/Album1">

              <div id="D:/Music/Artist1/Album1/cd1"></div>

              <div id="D:/Music/Artist1/Album1/cd2"></div>

        </div>

        <div id="D:/Music/Artist1/Album2"></div>

    </div>

    <div id="D:/Music/Artist2">

        <div id="D:/Music/Artist2/Album1"></div>

        <div id="D:/Music/Artist2/Album2"></div>

    </div>

</div>

Как я могу добиться того же в react?

Edit

Здесь (https://imgur.com/a/hS1pe ) является массивом объектов, возвращаемых readdirp, объект 1 является родительским dir объекта 17 и объекта 18.

Вложенность может быть больше 1 уровня (обновил примеры выше).

940 1

javascript reactjs electron

1 ответ:

Comments

Ничего не найдено.

canaan seaton · Accepted Answer · 2017-08-02 20:59:13

Я думаю, что это потенциальное решение того, что вы ищете...

Я считаю разумным использовать пакет directory-tree в отличие от пакета readdirp.

Передайте компоненту TreeView корневую опору так <TreeView root='c:\' />

import React, { Component } from 'react';
import dirTree from 'directory-tree'; // use this istead of 'readdirp`


export default class TreeView extends Component {
    constructor() {
        super();

        this.state = {
            tree: null //initialize tree
        }

        this.renderTreeNodes = this.renderTreeNodes.bind(this);
    }

    componentWillMount() {
        const { root } = this.props;
        const tree = dirTree(root);

        this.setState({ tree });
    }

    renderTreeNodes(children) {
        if (children.length === 0) return null;

        return (
            children.map(child => {
                return (
                    <div key={child.path} id={child.path}>
                        { child.hasOwnProperty('children') && child.type === 'directory'?
                            this.renderTreeNodes(child.children) : null}
                    </div>
                )
            })
        )
    }

    render() {
        const { tree } = this.state;

        return (
            <div id="default">
                <div id={tree.path}>
                    { this.renderTreeNodes(tree.children) }
                </div>
            </div>
        );
    }

}