React中使用react-icons绑定onClick事件时图标无响应如何解决？

存在的问题 #

• 图标渲染逻辑错误：你将GoThreeBars、GoX这两个React组件直接传入了<i>标签的className属性，而className仅接收字符串格式的CSS类名，不会渲染传入的组件，导致图标根本没有正确挂载到DOM上
• 组件命名不规范：自定义组件名header首字母小写，React会将其识别为原生HTML的<header>标签，引发不可预期的渲染问题
• 属性拼写错误：Link组件上的类名属性写为clasName，缺少字母s，正确应为className
• 切换逻辑写反：默认未点击状态下应该展示汉堡菜单图标，点击后展示关闭图标，你的三元判断逻辑刚好相反

修复后的完整代码 #

import React, {useState} from 'react';
import './header.css';
import { Link } from 'react-router-dom';
import { GoX } from "react-icons/go";
import { GoThreeBars } from "react-icons/go";

// 组件名首字母大写
function Header () {
  const [click, setClick] = useState(false)

  // 改用函数式更新避免闭包问题
  const handleClick = () => setClick(prev => !prev)
  
  return (
    <nav className="header">
     <Link to='/' className="header-logo">
       Nike
     </Link>
     
     <div className="menu" onClick={handleClick}> 
      {/* 直接渲染图标组件，调整判断逻辑 */}
      {click ? <GoX /> : <GoThreeBars />}
     </div>
    
    </nav>
  );
};

export default Header;

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