在反应

Question

我正在使用电子音乐播放器并决定尝试做出反应，但我仍然坚持创建一个目录树。

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

在第一次迭代中，我使用 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>

如何在反应中达到同样目的？

修改

这里（https://imgur.com/a/hS1pe）是readdirp返回的对象数组，对象1是对象17和对象18的父目录。

嵌套可以大于1级（更新上面的例子）。

Answer 1

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

我认为使用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>
        );
    }

}