[英]React scroll nav using useRef
我正在尝试制作一个单页应用程序,您可以在其中单击链接并向下滚动到与菜单项对应的部分。 我花了几天时间研究适合我的标准的修复程序,不幸的是,我的运气很差。
我的标准如下:
我希望这不是要求太多。
您可以 在这里玩一下我的 CodeSandbox。 叉子很受欢迎!
您可以使用forwardRef
HOC 包装每个部分。 为每个部分创建并设置一个ref
,并将参考传递给 header 组件,以便它可以在它们上调用scrollIntoView
function。
编辑添加了查看位置并触发滚动的效果。
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>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.