React.js实现可点击头部导航：页面内锚点跳转问题求助

下面提供两种实用方案，根据你的项目情况选择：

方案一：原生HTML锚点（最简单，适合无路由的单页应用） #

这种方法无需额外React API，直接用HTML原生特性就能实现：

1. 给目标区域添加唯一ID
   在你的About、Contact等页面区域的根元素上设置id属性，比如：

// About组件
<section id="about">
  {/* 关于我的内容 */}
</section>

// Contact组件
<section id="contact">
  {/* 联系方式内容 */}
</section>

2. 修改Header中的链接
   把原来的href="/"改成对应ID的锚点路径：

<ul className={active}>
  <li><a href="/">Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="/">Portfolio</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

3. 可选：添加平滑滚动效果
   在全局CSS里加一行，让跳转更丝滑：

html {
  scroll-behavior: smooth;
}

方案二：React useRef + scrollIntoView（更灵活，支持自定义滚动） #

如果需要更精细的控制（比如滚动偏移、自定义动画），用React的ref实现：

1. 在目标组件中创建Ref
   以About组件为例：

import React, { useRef, forwardRef } from 'react';

// 用forwardRef让父组件能拿到这个ref
const About = forwardRef((props, ref) => {
  return (
    <section ref={ref}>
      {/* 关于我的内容 */}
    </section>
  );
});

export default About;

2. 在父组件中收集Ref并传递给Header
   比如在App.js中：

import React, { useRef } from 'react';
import Header from './Header';
import About from './About';
import Contact from './Contact';

const App = () => {
  const aboutRef = useRef(null);
  const contactRef = useRef(null);

  const scrollToSection = (ref) => {
    // 平滑滚动到目标区域
    ref.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <div>
      <Header scrollToSection={scrollToSection} aboutRef={aboutRef} contactRef={contactRef} />
      <About ref={aboutRef} />
      {/* 其他组件 */}
      <Contact ref={contactRef} />
    </div>
  );
};

export default App;

3. 修改Header组件，替换为点击事件
   把a标签改成点击触发滚动，同时修复移动端菜单的图标切换逻辑（原来的逻辑未生效）：

import React, { useState } from 'react'

const Header = ({ scrollToSection, aboutRef, contactRef }) => {

const [active, setActive] = useState("nav_menu")
const [icon, setIcon] = useState("nav_toggler")

const navToggle = () => {
    // 切换菜单显示状态
    setActive(prev => prev === "nav_menu" ? "nav_menu nav_active" : "nav_menu");
    // 切换汉堡图标状态（需要在CSS里给nav_toggler_active设置叉号图标）
    setIcon(prev => prev === "nav_toggler" ? "nav_toggler nav_toggler_active" : "nav_toggler");
}

// 点击导航项后关闭移动端菜单
const handleNavClick = (ref) => {
  scrollToSection(ref);
  if (active.includes('nav_active')) {
    setActive("nav_menu");
    setIcon("nav_toggler");
  }
}

return (
    <header>
        <div className='headContainer flexSB'>
            <div className='logo'>
                <img src="./images/services-portfolio.png" alt="个人作品集logo" />
            </div>
            <nav>
                <ul className={active}>
                    <li><a href="/">Home</a></li>
                    <li onClick={() => handleNavClick(aboutRef)}>
                        <span>About</span>
                    </li>
                    <li><a href="/">Portfolio</a></li>
                    <li onClick={() => handleNavClick(contactRef)}>
                        <span>Contact</span>
                    </li>
                </ul>
            </nav>
            <div onClick={navToggle} className={icon}>
                <i className="fas fa-bars"></i>
            </div>
        </div>
    </header>
)
}

export default Header

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