防止在 React 渲染组件上使用 CSS 滚动

因此，我通过 React 在我的 html 中呈现一个组件，如下所示：

  <html>
  <body>
    <div id=app>${appHtml}</div>
    <script src="/bundle.js"></script>
  </body>
</html>

在我的应用程序中，我有一个汉堡按钮，即 onClick 全屏显示。

但是，正文是可滚动的。我通常会在 body 标签中添加一个类并使其成为 overflow: hidden 以防止这种情况发生。但是，我的反应组件在 body 标签中呈现，因此我无法控制基于反应组件内点击的切换类。

有没有人对我如何实现我正在寻找的东西有任何想法/建议。

谢谢！

原文由 pourmesomecode 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 317

“我无法控制基于反应组件内点击的切换类。”

不一定是真的！

以“React-ful”方式思考并谨慎修改 DOM 是件好事。您希望避免进行 DOM 操作的主要原因是因为它会导致 React 尝试呈现的内容与您可能尝试进行的未知更改之间发生冲突。但在这种情况下，你不是在操纵 React 正在渲染的 DOM，而是在操纵它的 parent 。在那种情况下，你会完全没问题做这样的事情：

 document.body.style.overflow = "hidden"

要么

document.body.classList.add("no-scroll")

或者任何有效的方法。你是完全安全的，因为 React 只在 #app 中渲染 DOM，而不关心它的父级发生了什么。事实上，许多应用程序和网站仅在页面的一小部分使用 React，以呈现单个组件或小部件，而不是整个应用程序。

除此之外，还有一种更好、更“响应式”的方式来做你想做的事。只需重组您的应用程序，使滚动容器位于您的 React 应用程序中，而不是 body 。该结构可能看起来像这样：

 <html>
  <body>
    <div id="app">
      <div id="scroll-container">
        <!-- the rest of your app -->
      </div>
    </div>
  </body>
</html>

Make body overflow hidden, and body and #app fill the entire screen, and you can control whether #scroll-container allows scrolling or not entirely within反应。

原文由 jered 发布，翻译遵循 CC BY-SA 4.0 许可协议

防止在 React 渲染组件上使用 CSS 滚动

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

git提交记录问题？

怎么获取动态弹出对话框的模拟单击？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

Stack Overflow 翻译