React：如何实现指定样式的多层级树形组件

问题背景 #

需要实现多层级树形组件，根节点下可嵌套多层子节点，线条样式需匹配目标效果，但使用@mui/lab的TreeView自定义StyledTreeItem2后，出现多余线条，不符合预期UI。

问题原因 #

1. 原代码仅通过rootNode判断横向线条是否显示，未区分节点是否为父节点的最后一个子节点，导致不必要的横向线条出现
2. 固定的top:66px未适配节点高度，易造成线条错位或冗余
3. 子节点组的竖线未处理最后一个子节点的情况，导致线条延伸过长

修正后的代码 #

const StyledTreeItem2 = styled(TreeItem)(({ rootNode }) => {
  const borderColor = "gray";
  return {
    position: "relative",
    // 仅非根节点且非最后一个子节点时显示横向线条
    "&:not(:last-child):before": {
      pointerEvents: "none",
      content: '""',
      position: "absolute",
      width: 32,
      left: -16,
      top: "calc(50% + 8px)",
      borderBottom: rootNode ? "none" : `1px dashed ${borderColor}`
    },
    // 保留移除选中/hover背景色的逻辑
    "&.MuiTreeItem-root > .MuiTreeItem-content:hover": {
      background: "transparent"
    },
    "&.MuiTreeItem-root > .MuiTreeItem-content.Mui-selected": {
      background: "transparent"
    },
    "&.MuiTreeItem-root > .MuiTreeItem-content.Mui-selected:hover": {
      background: "transparent"
    },
    // 子节点组竖线处理：区分最后一个子节点的线条截断
    [`& .${treeItemClasses.group}`]: {
      marginLeft: 16,
      paddingLeft: 18,
      position: "relative",
      "&:before": {
        pointerEvents: "none",
        content: '""',
        position: "absolute",
        top: 0,
        left: 0,
        borderLeft: `1px dashed ${borderColor}`,
        // 最后一个子节点的组，竖线只延伸到自身节点一半位置
        height: "100%",
        "&:last-child": {
          height: "calc(50% + 8px)"
        }
      }
    }
  };
});

关键改动说明 #

• 横向线条：通过&:not(:last-child):before控制显示范围，仅在非根节点且不是父节点最后一个子节点时渲染，用top: calc(50% + 8px)让线条垂直居中对齐节点图标
• 子节点组竖线：给group添加伪元素控制竖线，最后一个子节点的组竖线截断，避免多余延伸
• 保留原有移除选中/hover背景色的逻辑，不影响交互体验

使用提示 #

渲染根节点时传入rootNode={true}，子节点无需传入该属性：

<TreeView>
  <StyledTreeItem2 rootNode={true} nodeId="1" label="Root Node">
    <StyledTreeItem2 nodeId="2" label="Child Node 1">
      <StyledTreeItem2 nodeId="4" label="Grandchild Node 1" />
    </StyledTreeItem2>
    <StyledTreeItem2 nodeId="3" label="Child Node 2" />
  </StyledTreeItem2>
</TreeView>

内容的提问来源于stack exchange，提问作者Krishna Kumar