Reactjs 如何使用react js创建文件树资源管理器/视图？
我有一个react js应用程序，其登录页（索引页）允许用户创建新文件夹或新视图 如屏幕截图所示，文件夹和视图以平铺视图格式显示。我想将视图更改为类似于ide上的文件浏览器（如visual studio代码或eclipse）的树结构 我的登录页呈现函数-Reactjs 如何使用react js创建文件树资源管理器/视图？,reactjs,treeview,Reactjs,Treeview,我有一个react js应用程序，其登录页（索引页）允许用户创建新文件夹或新视图 如屏幕截图所示，文件夹和视图以平铺视图格式显示。我想将视图更改为类似于ide上的文件浏览器（如visual studio代码或eclipse）的树结构 我的登录页呈现函数- render() { const formList = localStorage.getItem("FormList") !== null ? JSON.parse(localStorage.getItem("FormList
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>
);
}
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；
让fid=folderid.replace（'/folder/'，''）；
返回(
{
setItem（'viewId'，null）；
}}style={float:'right'，width:'14%'，height:'43px'，marginLeft:'10px'}}onClick={e=>this.layoutset（e，null，null）}>
创建新视图
{newfolder==null&&
创建新文件夹
}
文件列表
此.backToForm（e）}>
{（folderList！==未定义&&folderList.length>0）&&
folderList.map（（val，i）=>{
返回此。文件夹单击（val.id，1）}>
{val.name}
}
)
}
{（formView！==未定义&&formView.length>0）&&
formView.map（（val，i）=>
this.folderClick（val.id，2）}>
{val.name}
)
}
{
（folderList！==undefined&&folderList.length==0&&formView！==undefined&&formView.length==0）&&
没有找到任何数据
}
{newfolder==1&&
this.setState（{foldername:e.target.value}）onKeyPress={this.createnewFolder}type='text'style={{width:'72%'，marginLeft:'2px'，height:'27px'}onFocus={this.handleFocus}/>
}
);
}