求助：Bootstrap 5.3.3 ScrollSpy active类在React侧边栏无法生效

核心问题 #

React项目使用Bootstrap 5.3.3的ScrollSpy功能时，静态示例代码正常工作，但动态生成的侧边栏链接在滚动时无法被添加active类，仅点击跳转功能正常。

可能的原因及解决方案 #

1. 动态DOM未被ScrollSpy识别 #

ScrollSpy默认在页面加载时初始化，而你的侧边栏链接是通过meanings数组动态渲染的。如果meanings是异步获取的，初始化时这些链接还未生成，ScrollSpy无法追踪到它们。

解决方法：在数据加载完成后手动初始化ScrollSpy
利用React的useEffect钩子，在meanings更新时创建并销毁ScrollSpy实例：

import { useEffect } from 'react';
import ScrollSpy from 'bootstrap/js/dist/scrollspy';

export default function Sidebar({ meanings }) {
  useEffect(() => {
    // 初始化ScrollSpy
    const spyInstance = new ScrollSpy(document.body, {
      target: '#sidebar',
      offset: 0,
      smoothScroll: true
    });

    // 组件卸载时清理实例，避免内存泄漏
    return () => spyInstance.dispose();
  }, [meanings]); // 依赖meanings，数据变化时重新初始化

  return (
    <div id="sidebar" className="grammar-class-list list-group">
      {meanings.map((meaning, index) => (
        <a 
          key={index}
          href={`#grammar-class-${index + 1}`} 
          className="grammar-class list-group-item list-group-item-action"
        >
          {meaning.partOfSpeech}
        </a> 
      ))}
    </div>
  );
}

2. 锚点元素的位置或存在性问题 #

检查页面中对应的锚点元素（如id="grammar-class-1"）是否存在，且未被其他容器遮挡或隔离：

• 在浏览器控制台执行document.getElementById('grammar-class-1')确认元素存在；
• 检查锚点元素的父容器是否设置了overflow: hidden、position: fixed等属性，导致ScrollSpy无法检测到其在body中的滚动位置。

3. 初始化顺序与配置问题 #

• 调整offset值：data-bs-offset="0"可能触发条件过严，尝试改为data-bs-offset="20"，降低激活阈值；
• 确认Bootstrap加载顺序：确保bootstrap.bundle.min.js在React渲染完成后加载，或改用import方式引入Bootstrap JS，避免DOM未就绪时初始化；
• 移除不必要的body属性：尝试移除tabindex="0"，部分场景下该属性可能干扰ScrollSpy的焦点检测逻辑。

4. 冲突的滚动事件或样式 #

检查是否有其他JS库或自定义代码修改了body的滚动行为，或者body本身设置了overflow相关样式，导致ScrollSpy无法正确监听滚动位置。

内容的提问来源于stack exchange，提问作者Juan Manuel Linares