Ищете способ манипулировать css в gatsby внутри функции

Question

Итак, поскольку я создаю сайт в 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;

Но я понятия не имею, как заставить ее работать в Гэтсби. Мне удалось создать событие щелчка (с помощью простого инструмента предупреждения), но теперь мне нужно управлять style.display, чтобы он был гибким или скрытым, в зависимости от того, что такое 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

Любая помощь?

Answer 1

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

Answer 2

У вас есть много подходов для этого, но во многих из них вам нужно использовать состояние (используя 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 будет переключать значение toggleNav на setToggleNav(!toggleNav) (установка противоположного значения). Поскольку это состояние, он повторно отрендерит ваш компонент, и, если он верен, он проверит это условие 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-visible), который displays как block вашей навигационной панели, поскольку он проверяет тернарное условие: {`${toggleNav ? 'is-visible': '' }`}.