使用上反应呈现组件

CSS防止滚动所以我使一个组件通过内我html阵营像这样：使用上反应呈现组件

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

在我的应用我有一个汉堡包按钮时，onClick去全屏。

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

有没有人有任何想法/建议如何实现我在找什么。

谢谢！

来源

2016-10-10 PourMeSomeCode

[使用React.js时何时，何处以及如何将类添加到document.body]（ http://stackoverflow.com/questions/26694570/when-where-and-how-to-add-class-to-the-document-body-when-using-react-js） –

链接：-https：// www.npmjs.com/package/react-sticky –

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

不一定正确！

这很好，你在“反应”的方式思考和修改DOM的警惕。您希望避免执行DOM操作的主要原因是因为它会导致React尝试呈现的内容与您尝试创建的未知更改之间的冲突。但是在这种情况下，你并没有操纵React渲染的DOM，你正在操纵其父的。在这种情况下，你会完全好做这样的事情：

document.body.style.overflow = "hidden"

或者

document.body.className += " no-sroll"

或者是其他的作品。你完全安全，因为React只会在#app内呈现DOM，并不关心其父项中发生的情况。实际上，许多应用程序和网站仅在页面的一小部分中使用React来呈现单个组件或小部件，而不是整个应用程序。

除此之外，还有更好的，更“反应”的方式去做你想做的事情。只需以滚动容器位于React应用程序内而不是body的方式重构您的应用程序即可。该结构可能是这个样子：

<html> <body> <div id="app"> <div id="scroll-container">  </div> </div> </body> </html>

让body溢出隐藏，并body和#app填满整个屏幕，并可以控制#scroll-container是否允许滚动或不完全之内作出反应。

来源

2016-10-10 17:00:27 jered

谢谢你！我实际上认为，如果你试图改变组件之外的任何东西，反应只会抱怨。我从来不知道你仍然可以这样做。 – PourMeSomeCode

以上不适用于iOS手机。

body-scroll-lock使用CSS和JS的组合，使其适用于所有设备，同时保持目标元素（例如模态）的可滚动性。

即。对于iOS，需要检测何时到达目标元素的底部或顶部，然后完全停止滚动

来源

2018-02-18 11:27:29

这是如何回答OP的问题？ –

使用上反应呈现组件

回答

相关问题