Javascript 正在寻找一种在函数中操作gatsby中的css的方法

因为我在盖茨比制作一个网站，所以我想制作一个导航条，当点击一个div时会出现。我制作了这个函数，以确保我可以用普通的html、css和javascript来完成它。这就是功能：

var myNavigation = document.getElementById("navigation");
var toggleStatus = 1;

var myFunction = function (){
       if (toggleStatus === 0) {
       myNavigation.style.display = "none";
       toggleStatus = 1
       } else {
              myNavigation.style.display = "flex";
              toggleStatus = 0;    
       }
};

myButton.onclick = myFunction;

但我不知道如何在盖茨比做到这一点。我已经设法创建了click事件（使用一个简单的警报工具），但现在我必须将style.display操作为flex或hidden，这取决于toggleStatus是什么，因此单击时也需要更改此状态。 这是我目前掌握的代码：

function showNav(){
}

const Header = () => {
    return(
       <header>
            <p>STIJN REYGAERTS</p>
                  <div className='Icon' onClick={showNav} style={{display: "flex"}}>
                     <div></div>
                     <div></div>
                     <div></div>          
                   </div>
       </header>    
    )
}

export default Header

函数showNav（）{
}
常量头=（）=>{
返回(
斯蒂金·雷加尔茨

)
}
导出默认标题

---

有什么帮助吗？

您有很多方法可以做到这一点，但在很多方法中，您需要使用状态（使用

useState

hook）。它们与您提供的代码片段稍有不同，但更清晰易读

第一种方法是JSX渲染。 然后，在您的SCS/CSS中：

#navigation{
  display: none;
}

#navigation.is-visible{
   display: block;
}

这种方法的想法几乎是一样的；通过单击

showNav

更改其值的一种状态，但在本例中，它设置了一个类（

可见

），该类将

显示为导航栏的
块，因为它正在验证三元条件：
{${toggleNav'可见：“}
import React，{useState}from'React'
import React, { useState } from 'react'
import Navbar from '../navbar/navbar'
import navigation from '../navbar/navbar.css'


const Header = () => {
const [toggleNav, setToggleNav]=useState(false);

const showNav = () => setToggleNav(!toggleNav);
  return(
       <header>
            <p>STIJN REYGAERTS</p>
                  <div className='Icon' onClick={showNav}>
                     <div></div>
                     <div></div>
                     <div></div>          
                   </div>
            <div id={navigation} className={`${toggleNav} ? 'is-visible': '' `}><Navbar /></div>       
       </header>    
    )
}

export default Header

从“../Navbar/Navbar”导入导航栏
从“../navbar/navbar.css”导入导航
常量头=（）=>{
const[toggleNav，setToggleNav]=useState（false）；
const showNav=（）=>setToggleNav（！toggleNav）；
返回(
斯蒂金·雷加尔茨

)
}
导出默认标题
这条评论通过理解逻辑的工作原理以及您如何设置它，对我帮助很大。不幸的是，我的导航栏是可见的，很多样式都并没有显示出来。谢谢@Stef_Verniers，这就是我的想法！你能粘贴你尝试过的代码吗？我已经把它作为一个答案贴在这条评论下面了！我建议编辑您的问题，不要提供新的答案以避免混淆。我已经编辑了我的答案，三元条件中的括号有错误<代码>{${toggleNav'可见：''}}}
。现在试试。抱歉，我已经更改了代码，我可以看到当点击图标时状态被切换。但导航栏本身不会对该命令做出反应。但我认为这是因为将css链接到相应属性时存在问题
#navigation{
  display: none;
}

#navigation.is-visible{
   display: block;
}

import React, { useState } from 'react'
import Navbar from '../navbar/navbar'
import navigation from '../navbar/navbar.css'


const Header = () => {
const [toggleNav, setToggleNav]=useState(false);

const showNav = () => setToggleNav(!toggleNav);
  return(
       <header>
            <p>STIJN REYGAERTS</p>
                  <div className='Icon' onClick={showNav}>
                     <div></div>
                     <div></div>
                     <div></div>          
                   </div>
            <div id={navigation} className={`${toggleNav} ? 'is-visible': '' `}><Navbar /></div>       
       </header>    
    )
}

export default Header