反応でディレクトリツリーコンポーネントを作成する

Question

電子を使用して音楽プレーヤーで作業していますが、反応を試してみることにしましたが、ディレクトリツリーの作成に取り掛かっています。

すべてのディレクトリを再帰的に取得するためにreaddirpを使用していますが、ツリーの構築方法はわかりません。アレイ全体バニラJS Iループで

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 

：

// 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', 

ツリー構造：readdirpは、次のプロパティを持つオブジェクトの配列を作成し

第一繰り返しで私が持つ要素を作成しますid = D：/ Music/Artist1（dir.fullPath）、id = D：/ Music/（dir.fullParentDir）で要素を検索していますが、存在しないため、要素をデフォルトに追加します素子。私はID = Dと素子作成

第2の反復：/音楽/ Artist1/Album1を、IはID = Dを持つ要素を検索：/音楽/ 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

私はreaddirpパッケージとは対照的に、それが賢明directory-treeパッケージを使用すると思います

...これはあなたが探しているものへの潜在的な解決策だと思います。

はそう<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> 
     ); 
    } 

}