React中如何实现点击导航滚动到对应组件？

方案一：正确使用forwardRef传递组件引用 #

如果坚持用ref实现，需要确保子组件正确接收并挂载ref，步骤如下：

1. 用forwardRef包裹子组件 #

将需要滚动到的组件（Home、About等）用React.forwardRef包裹，把外部传入的ref绑定到组件的根元素上：

// Home.jsx
import React, { forwardRef } from 'react';

const Home = forwardRef((props, ref) => {
  return (
    <div ref={ref} className="home-section">
      {/* 组件内部内容 */}
    </div>
  );
});

export default Home;

其他组件（About、Courses等）按照同样的方式改造，确保ref绑定到根容器上。

2. 父组件管理refs并传递滚动函数 #

在App组件中创建所有目标组件的ref，定义滚动函数后传递给Navbar：

// App.jsx
import React, { useRef } from 'react';
import Navbar from './Navbar';
import Home from './Home';
import About from './About';
import Courses from './Courses';
// 导入其他组件

function App() {
  // 创建各组件的ref
  const sectionRefs = {
    home: useRef(null),
    about: useRef(null),
    courses: useRef(null),
    gallery: useRef(null),
    contact: useRef(null),
    careers: useRef(null)
  };

  // 定义滚动函数
  const scrollToSection = (sectionName) => {
    const targetRef = sectionRefs[sectionName];
    if (targetRef.current) {
      targetRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  };

  return (
    <div className="app">
      <Navbar scrollToSection={scrollToSection} />
      <Home ref={sectionRefs.home} />
      <About ref={sectionRefs.about} />
      <Courses ref={sectionRefs.courses} />
      <Gallery ref={sectionRefs.gallery} />
      <Contact ref={sectionRefs.contact} />
      <Careers ref={sectionRefs.careers} />
      <Divider />
      <Footer />
    </div>
  );
}

export default App;

3. Navbar中调用滚动函数 #

在Navbar组件中，点击导航项时调用传递过来的scrollToSection函数，传入对应组件的名称：

// Navbar.jsx
import React from 'react';

function Navbar({ scrollToSection }) {
  return (
    <nav className="navbar">
      <button onClick={() => scrollToSection('home')}>首页</button>
      <button onClick={() => scrollToSection('about')}>关于我们</button>
      <button onClick={() => scrollToSection('courses')}>课程</button>
      <button onClick={() => scrollToSection('gallery')}>画廊</button>
      <button onClick={() => scrollToSection('contact')}>联系我们</button>
      <button onClick={() => scrollToSection('careers')}>招聘</button>
    </nav>
  );
}

export default Navbar;

方案二：使用元素ID实现滚动（更简单，无需处理ref传递） #

如果不想处理ref传递的复杂逻辑，可以直接给每个目标组件的根元素添加唯一ID，通过document.getElementById获取元素后滚动：

1. 给目标组件根元素添加ID #

可以直接在组件内部的根容器上设置ID：

// Home.jsx
function Home() {
  return (
    <div id="home-section" className="home-section">
      {/* 组件内容 */}
    </div>
  );
}

// About.jsx同理
function About() {
  return (
    <div id="about-section" className="about-section">
      {/* 组件内容 */}
    </div>
  );
}

2. Navbar中实现滚动逻辑 #

在Navbar组件中直接通过ID获取元素并调用scrollIntoView：

// Navbar.jsx
import React from 'react';

function Navbar() {
  const scrollToSection = (sectionId) => {
    const targetElement = document.getElementById(sectionId);
    if (targetElement) {
      // 平滑滚动，可根据需求调整配置
      targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  };

  return (
    <nav className="navbar">
      <button onClick={() => scrollToSection('home-section')}>首页</button>
      <button onClick={() => scrollToSection('about-section')}>关于我们</button>
      <button onClick={() => scrollToSection('courses-section')}>课程</button>
      <button onClick={() => scrollToSection('gallery-section')}>画廊</button>
      <button onClick={() => scrollToSection('contact-section')}>联系我们</button>
      <button onClick={() => scrollToSection('careers-section')}>招聘</button>
    </nav>
  );
}

export default Navbar;

常见问题说明 #

• 之前使用forwardRef失败，大概率是子组件未将外部传入的ref绑定到实际的DOM元素上，或者父组件传递ref时误用了普通props（必须用ref={xxx}而不是refProp={xxx}）。
• 如果有固定定位的导航栏，滚动后可能会遮挡组件顶部，可以在scrollIntoView后手动调整滚动位置，或者给目标组件添加与导航栏高度一致的padding-top。

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