如何从 .js 文件中更改 .jsx 组件样式？ 反应

Question

function Navbar() {

  const [shownavcontents, setShownavcontents] = useState(false)
  if(shownavcontents){  
    document.getElementsByClassName("navbardivofmobiledevice").style.display = "none";
  }else{
    document.getElementsByClassName("navbardivofmobiledevice").style.display = "block";
  }
  return (
    <>
      <div className="top">
        <Searchbar />
        <AiOutlineMenu size={20} className="outlinemenu" onClick={() => {setShownavcontents(true)}} />
      </div>

      <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>
    </>
  );
}

如您所见，我正在尝试为移动设备制作响应式导航栏，在本例中。 我遇到过一个问题。 我在导航栏和一些导航栏内容之上制作了按钮，我只想在用户单击此按钮时显示这些内容，反之亦然。 所以我尝试使用钩子来检查用户是否单击了完美运行的按钮，唯一不起作用的是这个 if else 语句，它看起来像document.getElementsByClassName("navbardivofmobiledevice").style.display = "none"; 在这里没有效果。 所以我的问题是这个的替代方案是什么？ 我可以在这里做什么？

Answer 1

这是命令式代码：

document.getElementsByClassName("navbardivofmobiledevice").style.display = "none";

使用 React，您很少会获得对 DOM 元素的引用并手动更新它们，并且在任何情况下，您都使用Refs来完成它，而不是使用getElement...或querySelector...方法）。 相反，您编写声明性代码并让 React 为您处理 DOM 更新。

在这种情况下，只需添加或删除hidden属性或 CSS class display: none来自您的 JSX：

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

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

      <div className="navbardivofmobiledevice" hidden={ !shownavcontents }>
        <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>
    </>
  );
}

如果您更喜欢使用 class，假设您已经定义了 CSS class .isHidden { display: none; } 你会.isHidden { display: none; }这一行：

<div className={ `navbardivofmobiledevice${ shownavcontents ? '' : ' isHidden' }` }>

关于一些评论提到的关于有条件地渲染的内容：

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

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

      { 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>
      ) }
    </>
  );
}

我会避免这种情况，因为对 Google 和其他搜索引擎隐藏您的主要导航会损害您的 SEO。 您需要在视觉上隐藏它，但仍将其保留在 DOM 中。

如果您想做得更好，请为具有嵌套子菜单的导航菜单添加所有适当的 ARIA 属性和逻辑，如下所述：

https://www.w3.org/WAI/ARIA/apg/example-index/menubar/menubar-navigation