寻找一种在函数内操作gatsby中的CSS的方法

Stef_Verniers

因此,因为我要在盖茨比(Gatsby)建立网站,所以我想创建一个在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;

但我不知道要在盖茨比(Gatsby)进行这项工作。我已经设法创建了click事件(使用一个简单的警报工具),但是现在我不得不根据toggleStatus的内容来操纵style.display进行伸缩还是隐藏,因此单击状态也需要更改。这是我到目前为止的代码:

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

有什么帮助吗?

费兰·比雷(Ferran Buireu)

您有很多方法可以做到这一点,但是在许多方法中,您需要使用状态(使用useState钩子)。它们与您提供的代码段有些不同,但更加清晰易读。

第一种方法,JSX渲染。

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


const showNav=()=> setToggleNav(!toggleNav);

    return(
       <header>
            <p>STIJN REYGAERTS</p>
                  <div className='Icon' onClick={showNav} style={{display: "flex"}}>
                     <div></div>
                     <div></div>
                     <div></div>          
                   </div>
         {toggleNav && <div id="navigation">Your navbar here</div>}
       </header>    
    )
}

export default Header

基本上,上面的代码段在功能组件(例如<Header>)中设置了一个状态setToggleNav是更改和更新状态值的触发函数。在这种情况下toggleNav将包含您state的值,并且useState(false)是初始值false

每次单击showNav都会切换toggleNavby的值setToggleNav(!toggleNav)(设置相反的值)。由于它是一种状态,它将重新渲染您的组件,如果为true,它将验证此条件,toggleNav && <div id="navigation">Your navbar here</div>以便显示您的导航栏。

第二种方法,CSS切换:

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


const showNav=()=> setToggleNav(!toggleNav);

    return(
       <header>
            <p>STIJN REYGAERTS</p>
                  <div className='Icon' onClick={showNav} style={{display: "flex"}}> 
                     If you click me, I'll toggle the class
                     <div></div>
                     <div></div>
                     <div></div>          
                   </div>
         <div id={`navigation`} class={`${toggleNav ? 'is-visible': '' }`}>Your navbar here</div>
       </header>    
    )
}

export default Header

然后,在您的SCSS / CSS中:

#navigation{
  display: none;
}

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

这种方法的思想几乎是相同的。通过单击更改其值的状态,showNav但在这种情况下,它会设置一个类(is-visibledisplays作为block您的导航栏,因为它正在验证三元条件:{`${toggleNav ? 'is-visible': '' }`}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章