由于项目中使用了react 及 ant-design ，在使用tree树型控件时，需要
类似下面的数据，
const treeData = [{
title: ‘0-0‘,
key: ‘0-0‘,
children: [{
title: ‘0-0-0‘,
key: ‘0-0-0‘,
children: [
{ title: ‘0-0-0-0‘, key: ‘0-0-0-0‘ },
{ title: ‘0-0-0-1‘, key: ‘0-0-0-1‘ },
{ title: ‘0-0-0-2‘, key: ‘0-0-0-2‘ },
],
}];但是后台传输过来的往往是下面这样的路径字符串数组，这就需要我们进行转化为树形层级对象了。
var arr=[
"root/",
"root/a/",
"root/a/new_b.png",
"root/a/qa/",
"root/a/qa/新建文本文档 (3).txt",
"root/asdfasdfasdfasdfasdfasdfasdf.txt",
"root/b.png",
"root/instqj_gfzqhk.exe",
"root/jupyter_notebook.png",
"root/new_b.png",
"root/output/new_b.png",
"root/soffice.exe",
"root/ti/asdfasdfasdfasdfasdfasdfasdf.txt",
"root/watermark.zip",
"root/中华人民共和国国民经济和社会发展 第十三个五年规划纲要 .pdf",
"root/国务院发布《中国制造2025》%28全文%29.pdf",
"root/新建文本文档 (3).txt",
"root/新建文本文档.txt",
"root/沧海一声笑.docx",
"root/理光C2011SP.exe"
]接下来我们开始行动
const pathToTree = (input) => {
var output = [];
for (var i = 0; i < input.length; i++) {
var chain = input[i].split("/");
var currentNode = output;
for (var j = 0; j < chain.length; j++) {
if (chain[j] === ‘‘) {
break;
}
var wantedNode = chain[j];
var lastNode = currentNode;
for (var k = 0; k < currentNode.length; k++) {
if (currentNode[k].title == wantedNode) {
currentNode = currentNode[k].children;
break;
}
}
if (lastNode == currentNode) {
var newNode = currentNode[k] = { key: input[i], title: wantedNode, children: [] };
currentNode = newNode.children;
} else {
delete currentNode.children
}
}
}
return output;
}
console.log(pathToTree(arr))得到了我们想要的结果
光是这样还不够，我们使用ant-design中的tree树形控件，不能让最低层级有children属性，同时，我们自己也可以额外定一个需求：所有文件名字长度不能超过一定数量。
另外，由于我的项目是上传到亚马逊S3，有的文件夹不会返回给我，比如这个文件"root/ti/asdfasdfasdfasdfasdfasdfasdf.txt"就没有返回" root/ti/"，所以我们要加上个层级数据。
我们这里遍历这个树型对象，简单处理一下
const traverseTree = function (data) {
return data.map((item) => {
//如果有相同的key，react的渲染会有问题，所以要处理一下。
let chain = item.key.split(‘/‘);
if (item.title !== chain.slice(-1)[0]) {
item.key = chain.slice(0, -1).join(‘/‘)
}
item.title = item.title.length > 10 ? item.title.substring(0, 7) + "..." : item.title
if (item.children.length > 0) {
traverseTree(item.children)
return item
} else {
delete item.children
return item
}
})
}
console.log(traverseTree(pathToTree(arr)))输出结果
