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

【问题标题】：Mui v5 - TreeView - On parent collapse, collapse all descendantMui v5 - TreeView - 在父折叠时，折叠所有后代
【发布时间】：2022-08-19 02:53:17
【问题描述】：

当我折叠一个 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

标签： reactjs material-ui tree frontend treeview

【解决方案1】：

为此，您需要覆盖TreeView 组件的默认行为。这不是非常困难，但可能会有些混乱，因为文档不是很好。

您必须控制TreeView 的expanded 属性。基本上，这意味着有一个状态控制哪些节点被展开/折叠。

与节点交互的方式有多种，有onClick方法，如onNodeSelect、onNodeToggle等，需要用户点击展开时的捕获方式。

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

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

function TreeDiagram(): React.Node {
   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>
   );
};

【讨论】：