如何创建一个树浏览器，以使用react js导航文件和子文件夹？

Question

我想将索引（登录页面）的视图从平铺视图更改为树结构视图，类似于在ide上看到的文件资源管理器，例如Visual Studio代码或Eclipse。

当前，我的索引页面（登录页面）以图块视图格式显示文件和文件夹，如下面的屏幕快照所示。

如上面的屏幕截图所示，用户可以使用左上角的2个按钮来创建新文件夹或新文件。因此这两个功能都可以正常工作。我只想将视图从平铺视图更改为树状结构视图，如屏幕截图所示。

indexpage.js（索引页组件）

render() {
    const formList = localStorage.getItem("FormList") !== null ? JSON.parse(localStorage.getItem("FormList")) : [];
    const { openmodal, newfolder, foldername, folderList, formView, alertMessage, alert } = this.state;
    const folderid = this.props.history.location.pathname;
    let fid = folderid.replace('/folder/', '');
    return (
      <div className="bacgrounImage">
        <AlertFunction type={alert} msg={alertMessage} />
        <Container fluid>
          <Row>
            <Col lg="12"
              className="spilt folderheader"
            >
              <div style={{ paddingTop: '7px', paddingLeft: '3%' }}>
                <NavLink to={fid === '/' ? "/formcreate" : '/formcreate/' + fid} >
                  <button className='butt' onClick={() => {
                    localStorage.setItem('viewId', null);
                  }} style={{ float: 'right', width: '14%', height: '43px', marginLeft: '10px' }} onClick={e => this.layoutset(e, null, null)}>
                    <h6 style={{ fontWeight: '500' }}>Create New View</h6>
                  </button>
                </NavLink>
                {newfolder === null &&
                  <button className='butt' type='button' onClick={this.folderName} style={{ width: '15%%', float: 'right' }} >
                    <img src={require('./image/newFolder.svg')} />
                    <span style={{ fontWeight: '500' }}>Create New Folder</span></button>
                }
              </div>
              <div>
                <h4>File List</h4>
              </div>
            </Col>
            <Col lg='12' className='newfolder folderList'>
              <div style={{ display: newfolder === 2 ? 'block' : 'none', padding: '8px 8px 16px 1px' }}>
                <span style={{ padding: '6px 18px', cursor: 'pointer' }} onClick={e => this.backToForm(e)}><i className="fa fa-arrow-left" aria-hidden="true" ></i></span>
              </div>
              {(folderList !== undefined && folderList.length > 0) &&
                folderList.map((val, i) => {
                  return <div key={i + "create"} className='list' id={val.id} onDoubleClick={() => this.folderClick(val.id, 1)}>
                    <img src={require('./image/folder.svg')} style={{ width: '48px' }} />
                    <span>{val.name}</span>
                  </div>
                }
                )
              }
              {(formView !== undefined && formView.length > 0) &&
                formView.map((val, i) =>
                  <div key={i + "create"} className='list' id={val.id} onDoubleClick={() => this.folderClick(val.id, 2)}>
                    <img src={require('./image/file.svg')} style={{ width: '48px' }} />
                    <span>{val.name}</span>
                  </div>)
              }

              {
                (folderList !== undefined  && folderList.length === 0 && formView !== undefined && formView.length === 0) &&
                <div className='noDataFound'>No data  found </div>
              }
              {newfolder === 1 &&
                <div className='list' style={{ backgroundColor: '#d3daff' }}>
                  <img src={require('./image/folder.svg')} style={{ width: '48px' }} />
                  <input value={foldername} onChange={e => this.setState({ foldername: e.target.value })} onKeyPress={this.createnewFolder} type='text' style={{ width: '72%', marginLeft: '2px', height: '27px' }} onFocus={this.handleFocus} />
                </div>
              }
            </Col>
            <div lg="12">
              <Formlisting formList={formList} openmodal={openmodal} toggle={this.toggle} />
            </div>
          </Row>
        </Container>
      </div>
    );
  }

如何修改渲染功能以将视图从平铺视图更改为树状结构视图，如屏幕截图所示。请帮助？