React全屏遮罩导航点击open选项后菜单无法显示问题咨询

• 最核心的诱因是对应.overlay类的CSS配置缺失，没有设置初始高度为0、固定定位、溢出隐藏等必要属性，导致修改高度属性后视觉上没有变化
• 代码中直接操作原生DOM的写法不符合React的状态驱动设计逻辑，可能和React的渲染更新机制冲突，导致样式修改被覆盖
• 额外的冗余问题：类方法同时使用了箭头函数声明和constructor手动绑定this，两者功能重复，虽然不会直接导致功能失效，但属于不必要的冗余代码；未使用的ReactDOM、Dom2react导入会增加不必要的打包体积

首先检查navbar.css文件中是否包含全屏遮罩的必要样式配置，参考配置如下：

/* 全屏遮罩基础样式 */
.overlay {
  height: 0;
  width: 100%;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  background-color: rgba(0,0,0, 0.9);
  overflow-y: hidden;
  transition: height 0.5s ease;
}
/* 遮罩内内容样式 */
.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: color 0.3s ease;
}
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

如果缺少以上配置，补充后即可验证原生DOM操作的写法是否生效。

更推荐使用React状态驱动的写法替代直接DOM操作，避免渲染冲突，修改后的代码如下：

import React, { Component } from 'react';
import './navbar.css';

class Navbar extends Component{
  // 定义导航开关状态
  state = {
    isNavOpen: false
  }

  openNav = () => {
    this.setState({ isNavOpen: true })
  }

  closeNav = () => {
    this.setState({ isNavOpen: false })
  }

  render(){
    return(
    <div className="App">
      {/* 用状态动态控制遮罩高度 */}
      <div 
        id="myNav" 
        className="overlay"
        style={{ height: this.state.isNavOpen ? '100%' : '0%' }}
      >
        <a href="#!" className="closebtn" onClick={this.closeNav}>&times;</a>
        <div className="overlay-content">
          <a href="#">About</a>
          <a href="#">Services</a>
          <a href="#">Clients</a>
          <a href="#">Contact</a>
        </div>
      </div>
      <span style={{fontSize: '30px', cursor: 'pointer'}} onClick={this.openNav}>☰ open</span>
    </div>
  );
  }
}

export default Navbar;

该写法完全遵循React的数据流逻辑，无需操作原生DOM，稳定性和可维护性更高。

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