React Nav组件完成滚动动作后添加.Nav Shadow类的最简实现咨询

安全阿岳

2026-5-20

嘿，这事儿不难，我给你整一个最简的实现方案，完全贴合你的需求：

我们可以借助React的ref来直接操作DOM元素，配合生命周期钩子完成监听绑定，逻辑清晰又简洁：

class Nav extends React.Component {
  constructor(props) {
    super(props);
    // 构造函数内绑定handleScroll方法，确保this指向组件实例
    this.handleScroll = this.handleScroll.bind(this);
    // 创建ref用于获取navbar的DOM节点
    this.navRef = React.createRef();
  }

  componentDidMount() {
    // 组件挂载完成后，给window添加滚动监听
    window.addEventListener('scroll', this.handleScroll);
  }

  componentWillUnmount() {
    // 组件卸载时移除监听，避免内存泄漏
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll() {
    // 核心逻辑：根据滚动距离切换类名
    const navEl = this.navRef.current;
    // 这里的10是滚动阈值，你可以根据需求调整
    window.scrollY > 10 
      ? navEl.classList.add('NavShadow') 
      : navEl.classList.remove('NavShadow');
  }

  render() {
    return (
      {/* 把ref绑定到navbar的根元素上 */}
      <nav ref={this.navRef} className="Nav">
        {/* 这里放你的Navbar内容，比如Logo、菜单等 */}
        <span>My Navbar</span>
      </nav>
    );
  }
}

关键细节说明：

方法绑定：在构造函数里用bind绑定handleScroll，保证函数执行时this能正确指向组件实例，不会出现undefined的问题。
Ref的优势：用React的createRef获取DOM元素，比document.querySelector更符合组件化思想，避免全局选择器带来的潜在问题。
生命周期处理：在componentDidMount添加监听，componentWillUnmount移除，这是React里处理全局事件的标准做法，能防止内存泄漏。
极简滚动判断：用三元运算符简化逻辑，一行代码完成类名的添加/移除，非常简洁。