Mui v5 - TreeView - 在父级折叠时，折叠所有后代

Question

当我折叠 TreeItem 时，我希望它的所有后代 TreeItem（它的子项、它们的子项等）也展开折叠。我怎样才能做到这一点？视觉流：

1.初始状态：

TreeItem #1

2.TreeItem #1 展开：

TreeItem #1
  TreeItem #2

3.TreeItem #2 扩展：

TreeItem #1
  TreeItem #2
    TreeItem #3

4.TreeItem #1 折叠：

TreeItem #1

5.TreeItem #1 第二次扩展 - 通缉案例：

TreeItem #1
  TreeItem #2

5.TreeItem #1 第二次扩展 - 实际发生的情况：

TreeItem #1
  TreeItem #2
    TreeItem #3

Answer 1

要实现此目的，您需要覆盖

TreeView

组件的默认行为。这并不是非常困难，但可能会有点令人困惑，因为文档不是很好。

您必须控制

expanded

的

TreeView

属性。基本上，这意味着对哪些节点展开/折叠进行状态控制。

与节点交互的方式有很多种，有

onClick

的方法，比如

onNodeSelect

、

onNodeToggle

等等，你需要一种捕获用户点击展开的方式。

一旦完成上述操作，您就可以使用一个函数来修改状态，如下所示：

import { TreeItem, TreeView } from "@mui/lab";

function TreeDiagram(): JSX.Element {
   const [expanded, setExpanded] = React.useState<string[]>([]);
   

   /**
    * Method to remove or include a node to the array of expanded node
    */
   const handleExpandedToggle = (nodeId: string): void => {
      setExpanded((prevExpandedState: string[]): string[] => 
         prevExpandedState.includes(nodeId)
            ? prevExpandedState.filter((node: string) => node !== nodeId)
            : [nodeId, ...prevExpandedState]);
   };

   /**
    * Method to handle the click event of the TreeItem's
    */
   const handleTreeItemClick = (event: React.SyntheticEvent, nodeId: string): void => {
      handleExpandedToggle(nodeId);
   };

   return (
      <TreeView
         expanded={expanded}
      >
         {/* All the tree items */}
         <TreeItem
            onNodeFocus={handleTreeItemClick}
            nodeId={"tree_item_1"}
            label={ /* Whatever you'd like here */ }
         ></TreeItem>
      </TreeView>
   );
};