所以我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