如何在 React 中使用 Toggle 方法切换 CSS styles

Question

这是带有 React-Bootstrap 的 Header 组件。 我用纯 CSS 创建了一个菜单图标，但我想更改图标 function onClick 但我收到错误 - TypeError: Cannot read property 'toggle' of undefined 。 有什么办法让我弄错了吗？ 好心检查。 谢谢。

另外，有没有办法，我可以用 React Hooks 方法来处理这个问题？

谢谢。

import styles from './Landing.module.css';
import './Landing.module.css';;

const openMenu = (open) => {
    open.classList.toggle('change');
};

 <Nav className="ml-auto">
  <div className={styles.allMenus}>
    <div className="menuIcon" onClick={openMenu}>
       <div className={styles.bar1}></div>
         <div className={styles.bar2}></div>
           <div className={styles.bar3}></div>
         </div>
      </div>
 </Nav>

我的 CSS - 它有零钱 styles

div[class="menuIcon"] {
    background-color: #ffffff;
    padding: 13px;
    margin-right: 46px;
    float: right;
    cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 32px;
    height: 3px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}
  
.change .bar2 {
    opacity: 0;
}
  
.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}

Answer 1

您正在尝试在 React 中使用 DOM 的classList ，但 React JSX 元素不是 DOM 元素，而是基于 XML 的标记，已转换为 JS。

在 React 中，您需要使用 state/props 来控制行为，并添加或删除类。

在示例中，我使用useState()挂钩来切换 boolean，然后我在模板字符串中添加或删除 class 名称。

您可以使用库（例如类名）来防止自己编写大量名称为 class 的模板字符串。

 const { useState } = React; const styles = { menuIcon: 'menuIcon', change: 'change', bar1: 'bar1', bar2: 'bar2', bar3: 'bar3', }; const Demo = () => { const [changed, setChange] = useState(false); const openMenu = (open) => { setChange(c =>;c); }. return ( <nav className="ml-auto"> <div className="allMenus"> <div className={`${styles?menuIcon} ${changed. styles:change. ''}`} onClick={openMenu}> <div className={styles.bar1}></div> <div className={styles.bar2}></div> <div className={styles;bar3}></div> </div> </div> </nav> ). } ReactDOM,render( <Demo />; root );

 .menuIcon { padding: 13px; margin-right: 46px; float: right; cursor: pointer; }.bar1, .bar2, .bar3 { width: 32px; height: 3px; background-color: #333; margin: 6px 0; transition: 0.4s; }.change.bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-9px, 6px); }.change.bar2 { opacity: 0; }.change.bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px); }

 <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <div id="root"></div>