使用useRef反应滚动导航

Question

我正在尝试制作一个单页应用，在其中单击链接，它会向下滚动到与菜单项相对应的部分。我花了几天时间研究适合我的标准的修复程序，但不幸的是，我的运气很少。

我的标准如下：

• 没有外部依赖性
• 地址栏中必须有网址（以允许直接链接到特定部分）
• 一定不能变态（即将URL注入地址栏）
• 必须尽可能简单

我希望不要要求太多。

您可以玩我的CodeSandbox Here。感谢叉子！

Answer 1

您可以使用forwardRef HOC包装每个部分。为每个部分创建并设置一个ref，并将引用传递给标头组件，以便它可以在其上调用scrollIntoView函数。

edit 添加了一种效果，可以查看位置并触发滚动。

const Header = ({ refs }) => {
  const location = useLocation();

  useEffect(() => {
    console.log("location", location.pathname);
    switch (location.pathname) {
      case "/about":
        scrollSmoothHandler(refs.aboutRef);
        break;
      case "/contact":
        scrollSmoothHandler(refs.contactRef);
        break;
      case "/hero":
        scrollSmoothHandler(refs.heroRef);
        break;

      default:
      // ignore
    }
  }, [location, refs]);

  const scrollSmoothHandler = ref => {
    console.log("Triggered.");
    ref.current.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <>
      <NavLink to="/hero" activeClassName="selected">
        Hero
      </NavLink>
      <NavLink to="/about" activeClassName="selected">
        About
      </NavLink>
      <NavLink to="/contact" activeClassName="selected">
        Contact
      </NavLink>
    </>
  );
};

const Hero = forwardRef((props, ref) => {
  return (
    <section ref={ref}>
      <h1>Hero Section</h1>
    </section>
  );
});

const About = forwardRef((props, ref) => {
  return (
    <section ref={ref}>
      <h1>About Section</h1>
    </section>
  );
});

const Contact = forwardRef((props, ref) => {
  return (
    <section ref={ref}>
      <h1>Contact Section</h1>
    </section>
  );
});

function App() {
  const heroRef = useRef(null);
  const aboutRef = useRef(null);
  const contactRef = useRef(null);

  return (
    <div className="App">
      <HashRouter>
        <Header refs={{ aboutRef, contactRef, heroRef }} />
        <Hero ref={heroRef} />
        <About ref={aboutRef} />
        <Contact ref={contactRef} />
      </HashRouter>
    </div>
  );
}