我的網站上有一個選單按鈕，當我單擊它時，我會切換網站選單的可見性。當選單按鈕可見時，如何在站點 Body 元素上切換一個類，以便防止垂直滾動？
// App.js
function App() {
return (
<div className="App">
<Header />
</div>
);
}
--
// Header.js
function Header() {
// Set menu button default state
const [active, setActive] = useState(false);
return (
<>
// Menu Button
<button
onClick={() => setActive(!active)}
type="button">
<span className="is-block">{active ? 'Close' : 'Menu'}</span>
</button>
// Menu Links
<div className={active ? 'c-navigation is-active' : 'c-navigation'}>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</div>
</>
)
}
uj5u.com熱心網友回復：
做這樣的事情：
document.body.style.overflow = "hidden";
不要擔心你不是在操縱 React 正在渲染的 DOM，你是在操縱它的父級。
function Header() {
// Set menu button default state
const [active, setActive] = useState(false);
useEffect(() => {
if (active) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "unset";
}
}, [active]);
return (
<>
// Menu Button
<button onClick={() => setActive(!active)} type="button">
<span className="is-block">{active ? "Close" : "Menu"}</span>
</button>
// Menu Links
<div className={active ? "c-navigation is-active" : "c-navigation"}>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</div>
</>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/411657.html
標籤：