如何让受控模式下MUI TreeView选中项自动滚动到视图中？

实现步骤 #

• 编程设置选中项后，通过节点的id获取对应的DOM元素。
• 判断节点是否处于可视范围内：
  • 获取TreeView容器和目标节点的位置信息，通过getBoundingClientRect()实现。
  • 对比节点的顶部、底部位置与容器的可视区域边界，确认节点是否完全在视图内。
• 若节点不在可视区，调用节点元素的scrollIntoView()方法，配置合适参数完成滚动。

示例代码 #

import { TreeView, TreeItem } from '@mui/material';
import { useState, useEffect } from 'react';

const MyTreeView = () => {
  const [selectedNodeId, setSelectedNodeId] = useState('');

  // 模拟编程触发节点选中
  const triggerProgrammaticSelect = (nodeId) => {
    setSelectedNodeId(nodeId);
  };

  useEffect(() => {
    if (!selectedNodeId) return;
    
    const nodeElement = document.getElementById(selectedNodeId);
    if (!nodeElement) return;

    const container = nodeElement.closest('.MuiTreeView-root');
    if (!container) return;

    const containerRect = container.getBoundingClientRect();
    const nodeRect = nodeElement.getBoundingClientRect();

    // 判断节点是否完全处于容器可视范围内
    const isNodeVisible = 
      nodeRect.top >= containerRect.top && 
      nodeRect.bottom <= containerRect.bottom;

    if (!isNodeVisible) {
      // 滚动到视图内，平滑滚动+就近对齐
      nodeElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }
  }, [selectedNodeId]);

  return (
    <TreeView
      selected={selectedNodeId}
      onNodeSelect={(event, id) => setSelectedNodeId(id)}
      sx={{ height: 300, overflow: 'auto' }}
    >
      <TreeItem nodeId="1" label="一级节点1">
        <TreeItem nodeId="1-1" label="二级节点1-1" />
        <TreeItem nodeId="1-2" label="二级节点1-2">
          <TreeItem nodeId="1-2-1" label="三级节点1-2-1" />
          <TreeItem nodeId="1-2-2" label="三级节点1-2-2" />
        </TreeItem>
      </TreeItem>
      <TreeItem nodeId="2" label="一级节点2">
        {/* 更多嵌套节点 */}
      </TreeItem>
    </TreeView>
  );
};

export default MyTreeView;

关键说明 #

• 用getBoundingClientRect()精准判断可视状态，避免无意义的滚动操作。
• scrollIntoView()的参数可按需调整：behavior: 'smooth'实现平滑过渡，block: 'nearest'确保节点以最近的位置进入视图，不会强制置顶/置底。

内容的提问来源于stack exchange，提问作者Andrea Wyss