我是个新手。我正在尝试使用功能性应用程序,并想使用功能toggleBurgerMenu()
。问题是,我不确定还需要定义什么。我应该使用props.toggleBurgerMenu()
吗?
import React from 'react'
import { Link } from "react-router-dom";
import './Header.scss'
const Header = (props) => {
toggleBurgerMenu = () => {
document.querySelector('.navbar-menu').classList.toggle('is-active');
}
return (
<div>
<header>
<nav className="navbar" role="navigation" aria-label="main navigation">
<div id="navbarBasicExample" className="navbar-menu">
<div className="navbar-start">
<Link to="/home" className="navbar-item" onClick={()=> this.toggleBurgerMenu()}>Home</Link>
</div>
</div>
</nav>
</header>
</div>
)
}
export default Header
感谢任何帮助。谢谢
答案 0 :(得分:0)
您需要定义bufferArray
这样的toggleBurgerMenu函数。然后您可以在const toggleBurgerMenu = () => { document.querySelector('.navbar-menu').classList.toggle('is-active'); }
答案 1 :(得分:0)
最好的做法是不使用文档,而可以使用ref,但是在这种情况下,您可以添加一些状态并更新类名
这是一个简单的例子
const Header = (props) => {
/** function to set the state of the button */
const [isActive, setIsActive] = useState(initialState)
return (
<div>
<header>
<nav className="navbar" role="navigation" aria-label="main navigation">
{/**if its true we add is-active class there are several package to this*/}
<div id="navbarBasicExample" className={`navbar-menu ${isActive ? 'is-active' : ''}`}>
<div className="navbar-start">
<Link to="/home" className="navbar-item" onClick={() => setIsActive(prev => !prev.setIsActive)}>Home</Link>
</div>
</div>
</nav>
</header>
</div>
)
}
export default Header