reactjs - React 中的树视图
问题描述
这是我的数据:
{
"studentId": "P1",
"assignments": [
{
"CourseId": 111,
"subjectId": "",
"topics": [
{
"topicId": "t1",
"isAssigned": false
}
]
},
{
"CourseId": 112,
"subjectId": "s1",
"topics": [
{
"topicId": "t1",
"isAssigned": false
},
{
"topicId": "t2",
"isAssigned": false
}
]
},
{
"CourseId": 111,
"subjectId": "",
"topics": [
{
"topicId": "t3",
"isAssigned": false
}
]
},
{
"CourseId": 113,
"subjectId": "s2",
"topics": [
{
"topicId": "t4",
"isAssigned": false
}
]
},
{
"CourseId": 114,
"subjectId": "",
"topics": [
{
"topicId": "t5",
"isAssigned": false
}
]
},
{
"CourseId": 115,
"subjectId": "s4",
"topics": [
{
"topicId": "t6",
"isAssigned": false
}
]
}
],
"updatedOn": null,
"updatedBy": null
}
我正在尝试在 React 中创建一个树视图。我正在使用“反应复选框树”。仅在分配对象上创建树视图,因为其余数据仅用于保存功能。
我已经创建了基本架构,因为我在模态窗口中需要它。它适用于硬编码数据,但我发现很难将我的数据集转换为树视图所需的格式。下面是工作正常的硬编码对象。
const nodes = [{
value: 'mars',
label: 'Mars',
children: [
{ value: 'phobos', label: 'Phobos' },
{ value: 'deimos', label: 'Deimos' },
],
}];
解决方案
试试下面的代码。这基本上是将所有第一个值转换为对象,{value.., label..}
如果您的代码中有任何特定条件不应该始终考虑第一个对象,那么请在您的问题中提及它。
const assignments = [
{
"CourseId": 111,
"subjectId": "",
"topics": [
{
"topicId": "t1",
"isAssigned": false
}
]
},
{
"CourseId": 112,
"subjectId": "s1",
"topics": [
{
"topicId": "t1",
"isAssigned": false
},
{
"topicId": "t2",
"isAssigned": false
}
]
},
{
"CourseId": 111,
"subjectId": "",
"topics": [
{
"topicId": "t3",
"isAssigned": false
}
]
},
{
"CourseId": 113,
"subjectId": "s2",
"topics": [
{
"topicId": "t4",
"isAssigned": false
}
]
},
{
"CourseId": 114,
"subjectId": "",
"topics": [
{
"topicId": "t5",
"isAssigned": false
}
]
},
{
"CourseId": 115,
"subjectId": "s4",
"topics": [
{
"topicId": "t6",
"isAssigned": false
}
]
}
];
const mapAssignment = (object, key) => ({value: key, label: object[key]});
console.log(assignments.map(ass => {
let assObj = {...mapAssignment(ass, 'CourseId')};
if(ass.subjectId) {
assObj['children'] = mapAssignment(ass, 'subjectId');
if(ass.topics.length > 0) assObj['children']['children'] = ass.topics.map(child => mapAssignment(child, 'topicId'))
}
else if(ass.topics.length > 0) assObj['children'] = ass.topics.map(child => mapAssignment(child, 'topicId'))
return assObj;
}));
推荐阅读
- javascript - 用于预购遍历检查的 Javascript 等效代码
- html - 为什么图像边框设置为内联块
- r - 如何计算保存在多列表中的数据的唯一出现次数?
- autodesk-forge - 如何导出多个 3D 视图
- .net - 实体框架数据库优先方法 Pascal 案例
- mysql - 我在带有下划线的 sql 存储过程中遇到语法错误
- python - 如何从您关注的 Facebook 页面获取发布通知
- python - 用于识别基本“数学表达式”的正则表达式
- python-3.x - Discord.py 重写命令中的反应处理
- python - 运行 buildozer 将 kivy 项目转换为 apk 时,python 文件中的语法错误