使用ul和li反应js树视图

Question

我想使用ul/li从react js中的JSON数据创建一个带有搜索节点的树形视图，而不使用任何外部库。下面是我的JSON数据示例。

-

[{ value：“普通”，label："General"，count："12 / 30"，}，{ value：“核算”，label：“核算”，count："17 / 30"，}，{ value：“劳务管理”，label：“劳务管理”，count："05 / 30"，孩子：[{ value：“劳务ManagementChild"，label：”劳务孩子“，孩子：{ value：”劳务ManagementSub ManagementChild"，label：“劳务ManagementSub孩子”，}，，}，{ value：“人工ManagementChild2"，label：”人工ManagementChild2"，}，]，}，]

Answer 1

假设您的JSON数据存储在一个名为tree的变量中，并且在li标记中有一些随机格式的数据，那么您可以使用

    const traverseNode = (node) => {
    return (
      <li key={node.label}>
        {node.label}:{node.value} {node.count}
        {node.children
          ? node.children.map((childNode) => (
              <ul>{traverseNode(childNode)}</ul>
            ))
          : null}
      </li>
    );
    };
    return <ul>{tree.map((node) => traverseNode(node))}</ul>;

递归解决方案对解决这类问题很有帮助。我建议再看看它们的数据结构和算法(for example on programiz)。您的结构不完全是一棵树，而是一棵多叉树。