javascript React：在特定组件上应用Body溢出

70gysomp 于 2023-06-28 发布在 Java

关注(0)|答案(2)|浏览(81)

我使用create-react-app创建了一个react应用程序。我的文件结构如下：

Index.js
App.css
App.js
-- MyComponent1.js
-- MyComponent2.js

为了在两个组件之间导航，我在App.js中使用react-router-dom，如下所示：

<BrowserRouter>
        <Route path='/MyComponent1' exact component={MyComponent1} />
        <Route path='/MyComponent2' exact component={MyComponent2} />
</BrowserRouter>

因此，两个组件都使用在App.js中导入的相同App.css样式
当我只在**Component1上时，我想在body上应用一个overflow:hidden，并在其他组件上删除这个新类，如何操作？

JavaScript

来源：https://stackoverflow.com/questions/69518920/react-apply-body-overflow-on-specific-component

2条答案

按热度按时间

nqwrtyyt1#

找到解决方案了！
我所要做的就是直接在组件上使用document.body来直接使用Hook设置样式。
因此overflow:visible将应用于组件安装，overflow:hidden将应用于组件卸载，如下所示：

useEffect(() => {
// Applying on mount
        document.body.style.overflow = "hidden";
// Applying on unmount    
        return () => {
          document.body.style.overflow = "visible";
        }
      }, [])

赞(0）回复(0）举报 2023-06-28

xj3cbfub2#

阿利亚克拉的安斯韦尔起作用了。
在我的例子中，有两页，一页有oferflow，另一页没有
解决方案

useEffect(() => {
    // Applying on mount
    document.body.style.overflow = "scroll";
    // Applying on unmount
    return () => {
      document.body.style.overflow = "hidden";
    };   }, []);

赞(0）回复(0）举报 2023-06-28

我来回答

javascript React：在特定组件上应用Body溢出

2条答案

相关问题

热门标签

最新问答