React中如何仅在指定组件页面为body设置overflow:hidden样式

推荐最直接的组件级控制方案，无需额外依赖，逻辑耦合度最低：

1. 函数式组件写法（MyComponent1.js内添加） #

直接在MyComponent1中利用useEffect的挂载/清理逻辑实现：

import { useEffect } from 'react';

function MyComponent1() {
  useEffect(() => {
    // 组件挂载时设置body样式
    const originalOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';

    // 组件卸载时恢复原有样式
    return () => {
      document.body.style.overflow = originalOverflow;
    };
  }, []);

  // 原有组件逻辑...
  return <div>MyComponent1内容</div>
}

export default MyComponent1;

2. 类组件写法（MyComponent1.js内添加） #

如果MyComponent1是类组件，用生命周期方法实现：

import React, { Component } from 'react';

class MyComponent1 extends Component {
  componentDidMount() {
    // 记录原有样式后设置
    this.originalOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
  }

  componentWillUnmount() {
    // 卸载时恢复
    document.body.style.overflow = this.originalOverflow;
  }

  // 原有组件逻辑...
  render() {
    return <div>MyComponent1内容</div>
  }
}

export default MyComponent1;

方案说明 #

• 因为你的路由配置加了exact精确匹配规则，只有访问/MyComponent1路径时MyComponent1才会挂载，离开路径时组件会自动卸载，刚好对应样式的添加和移除时机，不需要额外监听路由变化
• 实现时优先存储body原有overflow值再修改，避免覆盖其他逻辑设置的自定义overflow属性，兼容性更好

内容的提问来源于stack exchange，提问作者AlyaKra