所以我html像这样通过React在内部渲染一个组件：
html
<html> <body> <div id=app>${appHtml}</div> <script src="/bundle.js"></script> </body> </html>
在我的应用程序中，我有一个汉堡按钮，该按钮onClick全屏显示。
onClick
但是，主体是可滚动的。我通常将一个类添加到body标签中，并使其overflow: hidden防止出现这种情况。但是，我的react组件显示在body标记中，因此我无法控制基于react组件内单击的切换类。
body
overflow: hidden
有没有人对我要实现的目标有任何想法/建议。
谢谢！
“我无法控制基于React组件中单击的切换类。”
不一定是真的！
最好以“反应灵敏”的方式思考，并且对修改DOM保持警惕。您想要避免进行DOM操作的主要原因是因为它导致React尝试呈现的内容与您可能试图进行的未知更改之间发生冲突。但是在这种情况下，您不是在操纵React正在渲染的DOM，而是在操纵它的 parent 。在这种情况下，您完全可以这样做：
document.body.style.overflow = "hidden"
要么
document.body.classList.add("no-sroll")
或任何有效的方法。您绝对是安全的，因为React只在其中渲染DOM #app，而不在乎其父级发生了什么。实际上，许多应用程序和网站仅在页面的一小部分中使用React来呈现单个组件或小部件，而不是整个应用程序。
#app
除此之外，还有一种更好，更“反应灵敏”的方式来执行您想要的操作。只需以滚动容器位于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允许完全内无反应滚动与否。
#scroll-container
