javascript - 在react中创建目录树组件

Question

我正在使用 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，我循环遍历数组:

在第一次迭代中，我创建了一个带有 id=D:/Music/Artist1 (dir.fullPath) 的元素，我搜索了带有 id=D:/Music/< 的元素/strong> (dir.fullParentDir )，它不存在，因此我将该元素添加到默认元素。

第二次迭代我创建了一个带有 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 中实现相同的效果？

编辑

这里( /image/IncQP.jpg )是 readdirp 返回的对象数组，对象 1 是对象 17 和对象 18 的父目录。

嵌套可以大于 1 层(更新了上面的示例)。

Answer 1

我认为这是您正在寻找的潜在解决方案......

我认为使用directory-tree是明智的包而不是 readdirp包。

通过TreeView像这样组件一个 root prop <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>
        );
    }

}