React dodawanie clasy

Question

Szukam odpowiedzi na pytanie ja powinno się dodawać dynamicznie klasę, mam taki kod

import React, { useEffect } from 'react'
import { Link, Element } from "react-scroll";

function Nav() {
    useEffect(() => {
        const hamburger = document.querySelector('.ham-wrapper');
        const nav = document.querySelector('.nav')
        hamburger.addEventListener('click', function () {
            hamburger.classList.toggle('click')
            nav.classList.toggle('nav-background')
        })
    })
    return (
        <div className='nav'>
            <div className="ham-wrapper">
                <div className='ham'>
                    <div className="ham1"></div>
                    <div className="ham2"></div>
                    <div className="ham3"></div>
                </div>
                <ul className='desktop-wrapper'>
                    <li><Link smooth={true} to="about">About</Link></li>
                    <li><Link smooth={true} to="/">Home</Link></li>
                    <li><Link smooth={true} to="portfolio">Portfolio</Link></li>
                    <li><Link smooth={true} to="contact">Contact</Link></li>
                </ul>
            </div>
        </div>
    )
}

export default Nav

i  on działa, moje pytanie to czy mogę robić to w ten sposób? Czy po powinienem to zrobić stosując onClick na tym hamburgerze. Czy podane przeze mnie rozwiązanie jest rażące?

Dzięki za ew, odpowiedzi...

Answer 1

nie widzę sensu dla zabaw ręcznie z DOM gdy max VR reactowy... to nie jest dobra praktyka.

Ustaw sobie np. lokalny state przechowujący stan klikniętego hamburgera (boolean) i stwórz stałą lub funkcję, która będzie zwracała wyliczoną klasę dla elementu nav, bazując na tym state - i wtedy w className dasz wynik tej funkcji lub stałej.

Następnie dla hamburgera dodaj obcługę onClick i zrób sobie metodę np. toggleMenuView i odpowiednio zmieniaj boolean w state.

Comments

dzięki