所以我在我的 html 中通过 React 呈现一个组件，如下所示:
<html>
<body>
<div id=app>${appHtml}</div>
<script src="/bundle.js"></script>
</body>
</html>
在我的应用程序中，我有一个汉堡包按钮，onClick 会全屏显示。
但是，主体是可滚动的。我通常会在 body 标签中添加一个类，并使其成为 overflow: hidden 以防止这种情况发生。但是，我的 React 组件在 body 标记内呈现，因此我无法控制基于 React 组件内点击的切换类。
有没有人对我如何实现我正在寻找的东西有任何想法/建议。
谢谢!
最佳答案
“我无法控制基于 React 组件内点击的切换类。”
不一定是真的!
您以“React-ful”方式思考并谨慎修改 DOM 是件好事。您希望避免进行 DOM 操作的主要原因是因为它会导致 React 尝试呈现的内容与您可能尝试进行的未知更改之间发生冲突。但在这种情况下，您不是在操纵 React 正在渲染的 DOM，而是在操纵它的父级。在那种情况下，你完全可以做这样的事情:
document.body.style.overflow = "hidden"
或者
document.body.classList.add("no-scroll")
或者任何有用的东西。你是完全安全的，因为 React 只渲染 #app 中的 DOM，并不关心它的父级发生了什么。事实上，许多应用程序和网站仅在页面的一小部分使用 React，以呈现单个组件或小部件，而不是整个应用程序。
除此之外，还有一种更好、更“响应式(Reactive)”的方式来做你想做的事。只需以滚动容器位于 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 中滚动。
关于javascript - 防止在 React 渲染组件上使用 CSS 滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39962757/