我已经嵌套了JSON,然后使用此模块将其转换为嵌套文件树。 https://www.npmjs.com/package/react-nested-file-tree
我遇到的问题是,在通过组件并呈现后,我的JSON顺序无法保证。
作者还支持创建自定义文件夹模板。
function CustomFolder ({ name, currentPath, folderObj, onclick }) {
return (
<div className="sort">
<a ref={(name) => {this.folderName = name}} onClick={onclick}>
<span className='glyphicon glyphicon-folder-open'> </span>
{name}
</a>
</div>
)
}
我是否可以修改文件夹的创建方式,以便我可以返回并对文件夹进行排序,在它们已经通过组件后进行排序。
例如,浏览特定<span>
容器中的所有div
标记,并按字母顺序对内部内容进行排序。
添加示例以获得更清晰。
假设我已经渲染了这个结构:
<div>
<span className='icon sort'>Folder 3</span>
<span className='icon sort'>Folder 1</span>
<span className='icon sort'>Folder 2</span>
</div>
如何重新渲染以实现此目的:
<div>
<span className='icon sort'>Folder 1</span>
<span className='icon sort'>Folder 2</span>
<span className='icon sort'>Folder 3</span>
</div>
编辑:如果有人有可能支持帖子渲染的嵌套文件夹模块的其他建议,请为我删除一个链接。我看得很广泛,没有找到任何有用的东西。
JSON:
const directory = {
"_contents": [
{
"name": "filename_1",
"path": "filename_1"
},
{
"name": "filename_2",
"path": "filename_2"
}
],
"folder_1": {
"_contents": [
{
"name": "filename_1",
"path": "folder_1/filename_1"
}
]
},
"folder_2": {
"_contents": [],
"folder_2_1": {
"_contents": [
{
"name": "filename1.md",
"path": "folder_2/folder_2_1/filename1.md"
}
],
"folder_2_1_1": {
"_contents": [
{
"name": "filename1.md",
"path": "folder_2/folder_2_1/folder_2_1_1/filename1.md"
}
]
}
}
}
}