如果用戶向下滾動,我想向導航欄添加顏色背景。當 scrollY 的值等于 0 時,導航的背景將變為透明。我在組件DidMount生命周期方法中添加了一個滾動事件。在其中,我放置了一個更改狀態的函數。它的工作原理,但是當我滾動性能急劇下降時,我不知道如何使它更流暢。當狀態.open 等于 true 時,導航元素接收類。componentDidMount() {window.addEventListener("scroll", this.activeNavTab, { passive: true, }); }activeNavTab() { if (window.scrollY > 0) { this.setState(() => ({ navTab: true })); } else { this.setState(() => ({ navTab: false })); }}componentWillUnmount() { window.removeEventListener("scroll", this.activeNavTab);}問題 2在自己的自定義方法中操作DOM元素是一種好的做法嗎?例如:toggleMenu() { document.body.classList.toggle("disablescroll"); this.setState((prevState) => ({ open: !prevState.open }));}
如何在 React 中實現更好的滾動事件性能
一只萌萌小番薯
2022-09-29 15:27:26