我需要向页面添加文件结构，就像在代码编辑器中，我需要创建一个树结构。某个地方有错误，但我再也无法弄清楚问题出在哪里。有一个mockFiles文件，它是一系列嵌套的文件夹和文件。
const files = [
{
id: 1,
title: "Работа",
type: "Folder",
opened: true,
level: 0,
fatherId: null,
children: [
{
id: 2,
title: "Оборудование",
type: "Folder",
opened: true,
level: 1,
fatherId: 1,
children: [
{
id: 3,
title: "MA5600",
type: "Folder",
opened: true,
level: 2,
fatherId: 2,
children: [
{
id: 6,
title: "посмотреть",
type: "Folder",
opened: true,
level: 3,
fatherId: 3,
children: [
{
id: 7,
title: "конфиг",
type: "File",
opened: true,
level: 4,
fatherId: 6,
children: []
},
{
id: 8,
title: "mac-адреса",
type: "File",
opened: true,
level: 4,
fatherId: 6,
children: []
}
]
}
]
},
{
id: 4,
title: "MA5600T",
type: "Folder",
opened: true,
level: 2,
fatherId: 2,
children: [
{
id: 9,
title: "посмотреть",
type: "Folder",
opened: true,
level: 3,
fatherId: 4,
children: [
{
id: 10,
title: "конфиг",
type: "File",
opened: true,
level: 4,
fatherId: 9,
children: []
},
{
id: 11,
title: "mac-адреса",
type: "File",
opened: true,
level: 4,
fatherId: 9,
children: []
}
]
}
]
},
{
id: 5,
title: "C300/C300M",
type: "Folder",
opened: true,
level: 2,
fatherId: 2,
children: [
{
id: 12,
title: "посмотреть",
type: "Folder",
opened: true,
level: 3,
fatherId: 5,
children: [
{
id: 13,
title: "конфиг",
type: "File",
opened: true,
level: 4,
fatherId: 12,
children: []
},
{
id: 14,
title: "mac-адреса",
type: "File",
opened: true,
level: 4,
fatherId: 12,
children: []
}
]
}
]
}
]
}
]
}
]
export default files;
我需要把这一切都画在屏幕上。为此，我有一个 FileContainer 组件，它包含整个树（为了消除混乱，我删除了类名和其他不必要的信息）：
import mockFiles from '../../../mock-objects/files'
const FileContainer = () => {
const [files, setFiles] = useState(null);
useEffect(()=>{
setFiles(mockFiles)
}, [])
return (
<div>
<div>
<div>
<img/>
</div>
<div>
</div>
</div>
<div>
{files?.map(file =>
<TreeNode key={file.id} file={file}/>
)}
</div>
<div>
<a></a>
</div>
</div>
);
};
export default FileContainer;
这是 TreeNode 组件本身，它代表树中的 1 个文件夹或文件：
const TreeNode = ({file}) => {
const [item, setItem] = React.useState(file);
return (
<div>
<div>
<div>
{item?.type === "Folder" &&
<div>
<img/>
</div>
}
{item?.type === "FILE"
&&
<div>
<img/>
</div>
}
<div>
{item?.title}
</div>
</div>
<div>
<div>
<img/>
</div>
</div>
</div>
{item?.children &&
<div>
{item?.children.map((child) =>
<TreeNode key={child.id} item={child}/>
)}
</div>
}
</div>
);
};
export default TreeNode;
最后一个组件的逻辑是，它以我需要的形式呈现 mockFiles 数组中的一个对象，但由于某种原因，它工作得很奇怪，结果只呈现了第一个父文件夹，以及 1 个没有文本的 svg 和一个作为子项的箭头。
为什么 mockFiles 对象中的其他所有子文件夹都没有被呈现？
这不是你的组件的逻辑...这是你想象的。并且组件按照您编写的方式工作。不多也不少。也许它只是给你抛出一个错误。
看看我的版本 - 它运行良好。您可以以此为基础，然后进行修改以满足您的需要。