React中JS代码致页面重载内容消失及导航栏模糊异常问题

页面重载元素消失的原因及修复 #

你直接用原生JS操作DOM（比如getElementById、classList.toggle）的方式和React的虚拟DOM渲染机制冲突了。React依赖虚拟DOM追踪页面元素变化，手动修改DOM会让React失去对元素的控制，重载后就会出现元素消失的情况。

正确做法是用React的状态管理控制导航栏显示：

• 引入useState钩子，在组件内定义状态变量控制菜单开关
• 点击切换按钮时更新状态
• 通过动态类名给.nav-links添加/移除mobile-menu类

示例代码：

import { useState } from 'react';
// 保留你的其他导入语句

function App() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  return (
    <div className="App">
      {/* 菜单切换按钮 */}
      <img
        src="你的按钮图片地址"
        alt="切换菜单"
        onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
      />
      {/* 导航栏容器 */}
      <div className={`nav-links ${mobileMenuOpen ? 'mobile-menu' : ''}`}>
        {/* 导航链接内容 */}
      </div>
      {/* 页面其他内容 */}
    </div>
  );
}

export default App;

backdrop-filter模糊效果不全的修复 #

这个问题大概率是导航栏的布局层级或尺寸设置不对：

• 给.nav-links设置position: fixed、top: 0、left: 0、width: 100vw、height: 100vh，确保它完全覆盖整个视口
• 提高导航栏的z-index值（比如设为999），保证它在页面其他文本元素的上层
• 检查导航栏内的文本元素有没有设置实色背景，若有会遮挡模糊效果，需要去掉或设为透明

对应的CSS调整：

.nav-links {
  margin-left: -100%;
  transition: margin-left 0.3s ease;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  backdrop-filter: blur(8px);
  z-index: 999;
}

.nav-links.mobile-menu {
  margin-left: 0;
}

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