所以我在html 中通过 React 渲染一个组件，如下所示：
<html>
<body>
<div id=app>${appHtml}</div>
<script src="/bundle.js"></script>
</body>
</html>
在我的应用中，我有一个汉堡按钮，onClick 会全屏显示。
但是，正文是可滚动的。我通常会在body 标签中添加一个类并使其成为overflow: hidden 以防止这种情况。但是，我的反应组件在 body 标记内呈现，因此我无法控制基于反应组件内的单击来切换类。
有没有人对我如何实现我正在寻找的东西有任何想法/建议。
谢谢！
【问题讨论】：
标签： javascript html css reactjs
“我无法控制基于反应组件中的点击来切换类。”
不一定是真的！
您以“React-ful”的方式思考并且对修改 DOM 保持警惕，这很好。你想要避免进行 DOM 操作的主要原因是它会导致 React 尝试渲染的内容与你可能尝试进行的未知更改之间发生冲突。但在这种情况下，你不是在操作 React 正在渲染的 DOM，而是在操作它的 parent。在这种情况下，你可以做这样的事情：
document.body.style.overflow = "hidden"
或者
document.body.classList.add("no-scroll")
或任何有效的方法。你是完全安全的，因为 React 只在 #app 内渲染 DOM，并不关心它的父级中发生了什么。事实上，许多应用程序和网站仅在页面的一小部分使用 React，以呈现单个组件或小部件，而不是整个应用程序。
除此之外，还有一种更好、更“React-ful”的方式来做你想做的事。只需重新构建您的应用程序，使滚动容器位于您的 React 应用程序中，而不是 body。结构可能如下所示：
<html>
<body>
<div id="app">
<div id="scroll-container">
<!-- the rest of your app -->
</div>
</div>
</body>
</html>
使body溢出隐藏，body和#app填满整个屏幕，你可以控制#scroll-container是否允许滚动或不完全在React中。
【讨论】：
我建议使用 css position: "sticky" ，但我想这不是这里所质疑的。但它对我有用。我猜其他解决方案更好。
【讨论】：
这是我的两分钱：您可以将包含您的内容的 div 的高度设置为 100%（高度：100%） 或者在这种情况下 body { height: 100%}
【讨论】：
这里是如何在 reactjs 中使用 body-scroll-lock 库...
import React, {useState} from 'react';
import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
// Components
import Hamburger from './HeaderComponents/Hamburger.js';
import MegaDropdown from './HeaderComponents/MegaDropdown.js';
const Header = props => {
// variables
const [isSideNavShown, setIsSideNavShown] = useState(false);
const [isDropdownShowing, setIsDropdownShowing] = useState(false);
isDropdownShowing ? disableBodyScroll(document) : enableBodyScroll(document)
return (
<header className="header">
<Hamburger isDropdownShowing={isDropdownShowing} setIsDropdownShowing={setIsDropdownShowing} />
<MegaDropdown isDropdownShowing={isDropdownShowing} setIsDropdownShowing={setIsDropdownShowing} />
</header>
)
}
export default Header;
尤其是isDropdownShowing ? disableBodyScroll(document) : enableBodyScroll(document)这一行
这允许当我的下拉列表中的内容填充到需要向其添加滚动的点时，在显示下拉列表时禁用窗口（正文）滚动（覆盖我的整个屏幕）。所以即使窗口（正文）滚动被禁用，我仍然可以滚动浏览我的下拉菜单。
【讨论】：
以上不适用于 iOS 移动设备。
body-scroll-lock 结合使用 CSS 和 JS 使其适用于所有设备，同时保持目标元素（例如模式）的可滚动性。
即。对于 iOS，需要检测何时到达目标元素的底部或顶部，然后完全停止滚动
【讨论】：
body-scroll-lock 是否允许您阻止父元素在其子元素一直向下滚动到底部或顶部时滚动？