React函数组件如何实现点击汉堡按钮切换激活状态

你当前代码无法触发切换的原因有三个：

• 给HamburgerButton组件传入的isActive属性是硬编码的常量false，没有绑定父组件中已经定义的isActive状态
• 没有给子组件传入点击回调函数，点击按钮时无法触发父组件的状态更新
• 额外注意：你的父组件中使用了useState但没有从react中导入该Hook，运行时会直接报错

你写的子组件逻辑和CSS样式都是正确的，只需要修改父组件Header的代码即可：

// 补全useState的导入
import { useState } from 'react';
import { MyMoviesLogo } from 'components/Icons';
import HamburgerButton from 'components/HamburgerButton/HamburgerButton'; 

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


const Header = (): JSX.Element => {
  const [isActive, setIsActive] = useState(false);

  // 定义点击时的状态切换逻辑
  const handleHamburgerClick = () => {
    setIsActive(prev => !prev);
  };

  return (
    <header className={styles.header}>
      <MyMoviesLogo className={styles.headerIcon} />
      <HamburgerButton
        // 绑定状态值，不要写死false
        isActive={isActive}
        // 传入点击回调
        onClick={handleHamburgerClick}
      />
    </header>
  );
};

export default Header;

修改完成后点击按钮，就会触发状态反转，子组件会根据isActive的值自动切换active类名，实现汉堡图标和关闭叉号的过渡动画。后续你要实现侧边栏联动，直接复用同一个isActive状态控制侧边栏显隐即可，不需要额外新增状态。

可选优化：你自定义的addMultipleClassNames方法在当前场景下完全可用，如果后续有更复杂的类名拼接需求（比如根据条件判断多个类名是否生效），可以引入轻量的类名处理工具简化写法，当前阶段不需要额外调整。

内容的提问来源于stack exchange，提问作者DevelopWithAP