如何通过ID滚动到Ant Design List中的指定列表项？

问题原因分析 #

1. ID绑定位置错误：你把id加在了List.Item.Meta组件上，而实际应该绑定到List.Item——这才是列表项的外层容器，滚动内部元素无法触发列表容器的滚动行为。
2. React状态更新的异步性：调用setCurrentCourse后立即执行scrollToItem，此时DOM还未完成更新，可能无法正确获取到目标元素或触发滚动。

修改方案 #

1. 调整ID绑定位置

将id从List.Item.Meta移到List.Item组件上：

<List
  itemLayout="horizontal"
  dataSource={courses}
  className="hoverable-list"
  bordered
  renderItem={(item, index) => (
    <List.Item
      bordered="true"
      id={item.course_code} // 把ID绑定到列表项容器
      className={currentCourse === item.course_code ? 'active' : ''}
      onClick={() => setCurrentCourse(item.course_code)}
    >
      <List.Item.Meta
        title={item.course_code}
        description={item.course_name}
      />
    </List.Item>
  )}
/>

2. 利用useEffect监听状态变化，确保DOM更新后执行滚动

React的setState是异步操作，需要等状态同步到DOM后再触发滚动，用useEffect监听currentCourse的变化：

import { useEffect } from 'react';

const scrollToItem = (itemId) => {
  const element = document.getElementById(itemId);
  if (element) {
    // block: 'nearest' 避免不必要的滚动，保持元素在可视区域内即可
    element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
  }
};

// 监听选中课程的变化，状态更新后执行滚动
useEffect(() => {
  if (currentCourse) {
    scrollToItem(currentCourse);
  }
}, [currentCourse]);

const handleNodeClick = (nodeId) => {
  setCurrentCourse(nodeId);
  // 移除原有的scrollToItem调用，交给useEffect处理
};

额外说明 #

如果你的List嵌套在一个自定义的滚动容器（比如设置了overflow: auto的div）中，可以给滚动容器添加ref，然后调用容器的scrollTop来实现更精准的滚动，但上述方案在大多数场景下已经足够解决问题。

内容的提问来源于stack exchange，提问作者Stacey Levine