我希望写一个使用React 16.8.6的React钩子,当导航项被点击时可以滚动到特定的HTML元素部分。我有一个
Navigation
组件,它是页面上渲染的部分的同级。
此外,当页面滚动时,我想更新App
的状态以显示当前HTML部分。
导航组件JSX
<ul class="nav>
<li><a>Section 1</a></li>
<li><a>Section 2</a></li>
</ul>
应用级组件主页中的部分
<section className="section-1">Section 1</section>
<section className="section-2">Section 2</section>
钩子
const [navItem, setNavItem] = React.useState(null);
const sectionRef = React.useRef(null);
// Scroll To Item
useEffect(() => {
console.log(sectionRef.current);
if (sectionRef.current) {
sectionRef.current.scrollToItem();
}
}, []);