react如何保存树菜单展开的节点?

Question

如题.如何保存菜单展开的节点?
目标是当下一个节点展开时,收起上一次展开的节点.

  renderTree = (data: (TreeNode | ItemNode)[]) => {
    let eles: React.ReactNode[] = [];
    data.map(item => {
      if (!("children" in item)) {
        eles.push(
          <div
            style={{
              "user-select": "none"
            }}
          >
            {item.label}
          </div>
        );
      } else {
        let children = item.children;
        console.log(children);
        //表示这个展开后是需要加载的
        let childelems: React.ReactNodeArray = [<div>... ...</div>];
        if (children !== null) {
          childelems = this.renderTree(children);
        }
        eles.push(
          <Tree
            content={item.topicName}
            onChange={() => {
              let node = treeNodeMap[item.id] as TreeNode;
              if (node.children === null && node.isQueryChildren === false) {
                //表示请求过了
                node.isQueryChildren = true;
                queryDataById(item.id, this.handleUpdate);
              }
            }}
          >
            {childelems.length === 0 ? null : childelems}
          </Tree>
        );
      }
    });
    return eles;
  };

Answer 1

还是拼凑html片段的思路啊。代码有点乱。
把Tree的数据各层级都平铺开来。方便一次性遍历:
已展开的节点添加expanded: true,展开一个节点之前遍历所有数据，设置每一个节点的expanded: false,只设置将要展开的节点为expanded: true。
重新渲染你的页面，根据expanded的值设置节点的展开状态