所以我在我的内部通过 React 渲染了一个组件html：
<html>
<body>
<div id=app>${appHtml}</div>
<script src="/bundle.js"></script>
</body>
</html>
在我的应用程序中，我有一个汉堡按钮，onClick可以全屏显示。
但是，主体是可滚动的。我通常会在body标签中添加一个类并使其overflow: hidden防止发生这种情况。但是，我的 react 组件是在body标签内呈现的，因此我无法控制基于 react 组件内单击的切换类。
有没有人对我如何实现我正在寻找的东西有任何想法/建议。
谢谢！
“我无法根据 React 组件中的点击来控制切换类。”
不一定是真的！
以“react式”的方式思考并对修改 DOM 持谨慎态度是很好的。你想避免做 DOM 操作的主要原因是因为它会导致 React 试图呈现的内容与你可能试图进行的未知更改之间发生冲突。但是在这种情况下，您不是在操纵 React 正在渲染的 DOM，而是在操纵其父级。在这种情况下，你可以做这样的事情：
document.body.style.overflow = "hidden"
或者
document.body.classList.add("no-scroll")
或者什么都行。你是完全安全的，因为 React 只渲染其中的 DOM #app，而不关心它的父级发生了什么。事实上，许多应用程序和网站仅在页面的一小部分使用 React 来呈现单个组件或小部件，而不是整个应用程序。
除此之外，还有一种更好、更“react式”的方式来做你想做的事。只需以滚动容器位于 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滚动与否。
以上不适用于 iOS 手机。
body-scroll-lock结合使用 CSS 和 JS 使其适用于所有设备，同时保持目标元素（例如模态）的可滚动性。
IE。对于 iOS，需要检测何时到达目标元素的底部或顶部，然后完全停止滚动
以下是如何在 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)
这允许当我的下拉列表中的内容填满到需要向其添加滚动的点时，窗口（主体）滚动在下拉显示（覆盖我的整个屏幕）时被禁用。所以即使窗口（主体）滚动被禁用，我仍然可以滚动我的下拉列表。
这是我的两分钱：您可以将包含内容的 div 的高度设置为 100% ( height: 100%) 或者在这种情况下 body { height: 100%}