React新手求助：跨组件修改Nav菜单display属性的最优实现方式

你当前用querySelector直接操作DOM的方式虽然能实现功能，但不符合React的核心设计理念——状态驱动UI，直接修改DOM会导致组件状态和实际UI不同步，后期维护和调试会很麻烦。更合适的方案是通过状态提升来实现，具体步骤如下：

1. 在父组件中管理菜单状态 #

创建一个父组件（比如App.js），用useState钩子管理菜单的显示状态isMenuOpen，并提供打开/关闭菜单的回调函数。

import Navbar from './Navbar';
import Navmenu from './Navmenu';
import { useState } from 'react';

function App() {
  // 初始状态：菜单隐藏
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <div className="App">
      {/* 把打开菜单的回调传给Navbar */}
      <Navbar onOpenMenu={() => setIsMenuOpen(true)} />
      {/* 把菜单状态和关闭回调传给Navmenu */}
      <Navmenu 
        isOpen={isMenuOpen} 
        onCloseMenu={() => setIsMenuOpen(false)} 
      />
    </div>
  );
}

export default App;

2. 修改Navbar组件 #

去掉直接操作DOM的代码，通过调用父组件传递的onOpenMenu回调来更新状态。

import './Navbar.css'

function Navbar({ onOpenMenu }) {
  return (
    <header className="navbar container">
      <a className='logo' href='/#' pure mix</a>
      {/* 点击按钮时调用父组件的回调 */}
      <i className="fa-solid fa-bars burgerBtn" onClick={onOpenMenu}></i>
    </header>
  )
}

export default Navbar

3. 修改Navmenu组件 #

根据父组件传递的isOpen状态控制菜单显示，推荐用CSS类名切换（比直接操作style更符合模块化规范）。

import "./Navmenu.css";

function Navmenu({ isOpen, onCloseMenu }) {
  return (
    {/* 根据isOpen状态添加激活类 */}
    <div className={`navMenu ${isOpen ? 'navMenu--open' : ''}`}>
      <a className="navItem" href="/#">home</a>
      <a className="navItem" href="/#">about</a>
      <a className="navItem" href="/#">logo</a>
      <a className="navItem" href="/#">contact</a>
      {/* 点击关闭按钮调用父组件回调 */}
      <i className="fa-solid fa-xmark close" onClick={onCloseMenu}></i>
    </div>
  );
}

export default Navmenu;

4. 补充CSS样式 #

在Navmenu.css中添加激活状态的样式：

.navMenu {
  display: none;
  /* 你的原有菜单样式 */
}

.navMenu--open {
  display: flex;
}

为什么这种方式更好？ #

• 符合React单向数据流：状态集中在父组件，UI由状态驱动，避免了DOM操作带来的状态不一致问题。
• 组件解耦：Navbar和Navmenu不需要知道对方的DOM结构，仅通过props通信，更易维护和复用。
• 状态可追踪：所有状态变化都通过setIsMenuOpen触发，调试时能清晰看到状态流转。

如果后续项目规模变大，也可以用React Context或Redux等状态管理工具，但对于当前场景，状态提升已经足够简洁高效。

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