Onclick Event on react使用react图标

Question

我有一个汉堡包图标(GoThreeBars)和一个关闭图标(GoX)，我想在react js上创建一个onClick事件，但我的图标不起作用。这是我的代码。

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 (!click)

return (
<nav className="header">
<Link to ='/' clasName ="header-logo">
Nike
</Link>

<div className="menu" onClick={handleClick}> 
<i className={click ?<GoThreeBars/> : <GoX/>}/>
</div>

</nav>
);
};
export default header;

Answer 1

用className=menu更改div，如下所示:

<div className="menu" > 
{click ? <GoThreeBars onClick={handleClick} /> 
: <GoX onClick={handleClick} />}
</div>