在React应用中实现点击导航平滑滚动到指定区域的教程

// App.jsx (简化结构)
import Navbar from './Navbar';
import Home from './Home';
import About from './About';
// ... 其他内容组件

export default function App() {
  return (
    <>
      <Navbar /* ... 这里将传递引用 */ />
      <Home /* ... 这里将接收引用 */ />
      <About /* ... 这里将接收引用 */ />
      {/* ... 其他内容组件 */}
    </>
  );
}

// App.jsx
import { useRef } from "react";
import Navbar from "./Navbar";
import Home from "./Home";
import About from "./About";
// import Courses from "./Courses"; // 假设还有更多组件

export default function App() {
  // 为每个需要滚动的目标组件创建引用
  const homeRef = useRef(null);
  const aboutRef = useRef(null);
  // const coursesRef = useRef(null); // 如果有 Courses 组件

  // 将所有引用打包成一个对象或数组，方便传递给 Navbar
  const sectionRefs = {
    homeRef,
    aboutRef,
    // coursesRef,
  };

  return (
    <>
      {/* 将引用对象作为 props 传递给 Navbar */}
      <Navbar sectionRefs={sectionRefs} />

      {/* 将单个引用作为 ref prop 传递给目标组件 */}
      <Home ref={homeRef} />
      <About ref={aboutRef} />
      {/* <Courses ref={coursesRef} /> */}
    </>
  );
}

// Home.jsx
import { forwardRef } from "react";

// 使用 forwardRef 包裹 Home 组件
// forwardRef 的回调函数接收两个参数：props 和 ref
const Home = forwardRef((props, ref) => {
  return (
    // 将接收到的 ref 绑定到 div 元素上
    <div className="main-section home-section" ref={ref}>
      <h1>欢迎来到首页</h1>
      <p>这里是应用的主页内容，展示了核心信息。</p>
      <div style={{ height: '500px', background: '#f0f0f0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <p>填充内容，确保滚动效果</p>
      </div>
    </div>
  );
});

export default Home;

// About.jsx
import { forwardRef } from "react";

const About = forwardRef((props, ref) => {
  return (
    <div className="main-section about-section" ref={ref}>
      <h1>关于我们</h1>
      <p>了解我们的故事、使命和愿景。</p>
      <div style={{ height: '600px', background: '#e0e0e0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <p>更多关于我们的信息</p>
      </div>
    </div>
  );
});

export default About;

// Navbar.jsx
import React from 'react';
import './Navbar.css'; // 假设有一些样式

export default function Navbar({ sectionRefs }) { // 接收 sectionRefs 对象

  // 辅助函数，用于执行滚动操作
  const scrollToSection = (ref) => {
    if (ref && ref.current) {
      ref.current.scrollIntoView({
        behavior: 'smooth', // 启用平滑滚动效果
        block: 'start',     // 滚动到元素的顶部与视口顶部对齐
      });
    }
  };

  return (
    <nav className="navbar">
      <ul className="nav-list">
        <li>
          <a href="#home" onClick={(e) => {
            e.preventDefault(); // 阻止默认的锚点跳转行为
            scrollToSection(sectionRefs.homeRef);
          }}>
            首页
          </a>
        </li>
        <li>
          <a href="#about" onClick={(e) => {
            e.preventDefault();
            scrollToSection(sectionRefs.aboutRef);
          }}>
            关于我们
          </a>
        </li>
        {/* 如果有 Courses 组件，可以添加对应的导航链接 */}
        {/* <li>
          <a href="#courses" onClick={(e) => {
            e.preventDefault();
            scrollToSection(sectionRefs.coursesRef);
          }}>
            课程
          </a>
        </li> */}
      </ul>
    </nav>
  );
}

.navbar {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: #333;
  padding: 1rem 0;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.nav-list {
  list-style: none;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.nav-list li {
  margin: 0 15px;
}

.nav-list a {
  color: white;
  text-decoration: none;
  font-size: 1.1rem;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.nav-list a:hover {
  background-color: #555;
}

/* 确保内容有足够的高度来滚动 */
.main-section {
  padding: 50px 20px;
  min-height: 80vh; /* 确保每个部分都有足够的垂直空间 */
  border-bottom: 1px solid #ccc;
}

.home-section {
  background-color: #f9f9f9;
}

.about-section {
  background-color: #f0f8ff;
}