在 React.js 中單擊按鈕時如何切換 class

Question

我想將 class 切換到button和nav 。

這是我嘗試過的。

import React from 'react';
  
class About extends React.Component{
  render(){ 
    return (
    <>
      <button className={`btn-toggle ${show ? "btn-active" : ""}`}>>
        Toggle
      </button>
      <nav className={`nav-toggle ${show ? "nav-active" : ""}`}>menu</nav>
    </>
    )
  }
}
export default About;

我需要做什么？

Answer 1

您可以嘗試這樣的事情，但我不確定為什么要切換按鈕，因為您總是需要顯示一些可以單擊並顯示導航的內容。 但是正如它所提到的，改變課程並不是一個好習慣

import React, { useState } from 'react';
  
const About = () => {
   const [navVisible, setNavVisible] = useState(false);
   const [btnVisible, setBtnVisible] = useState(true);

    return (
    <>
      <button onClick={() => setNavVisible(!navVisible)} className={`btn-toggle ${show ? "btn-active" : ""}`}>>
        Toggle
      </button>
      <nav className={`nav-toggle ${navVisible ? "nav-active" : ""}`}>menu</nav>
    </>
    )
}
export default About;