如何在React的.js文件中修改.jsx组件样式？移动端导航栏问题

你的代码里有两个核心问题导致样式修改无效：

• document.getElementsByClassName返回的是HTMLCollection类数组对象，不是单个DOM元素，直接访问.style会报错；就算取索引（比如[0]）能操作DOM，也不符合React的开发思路。
• 在组件函数体里直接操作DOM，会在每次组件渲染时执行，很容易和React的DOM更新机制冲突，违背了React声明式编程的原则。

另外原代码里点击菜单按钮只设置setShownavcontents(true)，这样只能打开导航栏不能关闭，必须改成切换状态才能实现点击控制显示隐藏。

下面是三种可行的替代方案，都不用直接操作DOM，完全遵循React的状态驱动逻辑：

方案一：条件渲染（推荐，最符合React思路） #

直接根据shownavcontents状态决定是否渲染导航栏，或者控制显示属性：

function Navbar() {
  const [shownavcontents, setShownavcontents] = useState(false);

  // 点击切换状态，实现打开/关闭
  const toggleNav = () => setShownavcontents(prev => !prev);

  return (
    <>
      <div className="top">
        <Searchbar />
        <AiOutlineMenu size={20} className="outlinemenu" onClick={toggleNav} />
      </div>

      {/* 状态为true时渲染导航栏 */}
      {shownavcontents && (
        <div className="navbardivofmobiledevice">
          <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#memebers">Members</a></li>
            <li><a href="#allposts">All Posts</a></li>
            <li><a href="#myposts">My Posts</a></li>
          </ul>
        </div>
      )}
    </>
  );
}

如果需要保留DOM仅隐藏（比如做过渡动画），可以改成内联样式控制：

<div 
  className="navbardivofmobiledevice"
  style={{ display: shownavcontents ? 'block' : 'none' }}
>
  {/* 导航内容 */}
</div>

方案二：CSS类切换（适合复杂样式/过渡动画） #

先在CSS里定义显示/隐藏的类：

.navbardivofmobiledevice {
  display: none;
  /* 可添加默认过渡效果 */
  transition: all 0.3s ease;
}
.navbardivofmobiledevice.show {
  display: block;
}

然后在组件里根据状态切换类名：

function Navbar() {
  const [shownavcontents, setShownavcontents] = useState(false);
  const toggleNav = () => setShownavcontents(prev => !prev);

  return (
    <>
      <div className="top">
        <Searchbar />
        <AiOutlineMenu size={20} className="outlinemenu" onClick={toggleNav} />
      </div>

      <div 
        className={`navbardivofmobiledevice ${shownavcontents ? 'show' : ''}`}
      >
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#memebers">Members</a></li>
          <li><a href="#allposts">All Posts</a></li>
          <li><a href="#myposts">My Posts</a></li>
        </ul>
      </div>
    </>
  );
}

方案三：使用useRef（特殊场景下用） #

如果确实需要直接操作DOM（比如复杂动画需求），用React的useRef钩子替代document查询：

import { useState, useRef } from 'react';

function Navbar() {
  const [shownavcontents, setShownavcontents] = useState(false);
  const navRef = useRef(null);
  
  const toggleNav = () => {
    const newState = !shownavcontents;
    setShownavcontents(newState);
    // 通过ref安全操作DOM
    if (navRef.current) {
      navRef.current.style.display = newState ? 'block' : 'none';
    }
  };

  return (
    <>
      <div className="top">
        <Searchbar />
        <AiOutlineMenu size={20} className="outlinemenu" onClick={toggleNav} />
      </div>

      <div 
        className="navbardivofmobiledevice"
        ref={navRef}
        style={{ display: 'none' }}
      >
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#memebers">Members</a></li>
          <li><a href="#allposts">All Posts</a></li>
          <li><a href="#myposts">My Posts</a></li>
        </ul>
      </div>
    </>
  );
}

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