Я новичок в React (2 дня), но у меня возникла задача просмотреть JSON в виде дерева. Необходимо отображать в виде ярлыков свернутых узлов меню и при нажатии отображать их данные.
Я наконец нашел решение для отображения меток узлов, но они отображаются все в одном элементе списка и повторяются столько раз, сколько узлов у меня есть.
Вот мой JSON
{
"main": {
"nodes": {
"firstnode": {
"storage": [
"1",
"1",
"3"
],
"interfaces": [
"1",
"2",
"3"
]
},
"secondnode": {},
"thirdnode": {}
}
},
"secondary": {}
}
Вот мой код
const LeftTreeNodes = Object.keys(data.left.nodes).map(item =>
<div>
<ul>
<li key = {Object.keys(data.left.nodes)}>
{Object.keys(data.left.nodes)}
</li>
</ul>
</div>
);
Просто используйте сопоставляемый item
для печати каждого из них:
<div>
<ul>
{Object.keys(data.left.nodes).map(item =>
<li key = {item}>
{item}
</li>
)}
</ul>
</div>
Это отобразит ключи на data.left.nodes
и отобразит li
для каждого из них со значением каждого из них.
@DavinTyron, а как правильно построить дерево?