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

一尘不染

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

javascript

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";在这里没有效果。所以我的问题是这个的替代方案是什么？我可以在这里做什么？

阅读 83

2022-07-26

共1个答案

一尘不染

这是命令式代码：

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

使用 React，您很少会获得对 DOM 元素的引用并手动更新它们，并且无论如何，您都使用Refs，而不是使用getElement...orquerySelector...方法）。相反，您编写声明性代码并让 React 为您处理 DOM 更新。

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

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

如果你喜欢使用一个类，假设你已经定义了一个 CSS 类.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

2022-07-26