如何使用 React-Hamburger-Menu 设置汉堡菜单？答案

【问题标题】：How to set a hamburger menu using React-Hamburger-Menu?如何使用 React-Hamburger-Menu 设置汉堡菜单？
【发布时间】：2019-08-26 20:23:26
【问题描述】：

我正在尝试制作一个使用 CSS3 淡入和淡出的菜单，当您单击汉堡菜单时。我正在使用react-hamburger-menu。

虽然我不知道如何使用handleClick 函数以及如何在单击菜单按钮或任何链接时触发类名的切换。

如果这很重要，我正在使用 Gatsby react starter...

这是我目前编写的代码

import { Link } from "gatsby"
import PropTypes from "prop-types"
import React from "react"
import './Header.css'
import { HamburgerMenu } from "react-hamburger-menu";

handleClick() {
  this.setState({
      open: !this.state.open
  });
}

const Header = ({ siteTitle }) => (
  <div className="Header">
    <div className="HeaderGroup">
      <Link to="/" className="logo"><img src={require('../../images/logo.svg')} width="70" alt="Ryan B. Designs"/></Link>
      <HamburgerMenu 
        isOpen={this.state.open}
        menuClicked={this.handleClick.bind(this)}
        width={18}
        height={15}
        strokeWidth={1}
        rotate={0}
        color='black'
        borderRadius={0}
        animationDuration={0.5}
      />
    </div>
    <div className={"MainNavigation "  + (this.state.open ? 'show' : 'hidden')}>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About Me</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>
    </div>
  </div>
)

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

export default Header

我想要发生的是当我单击汉堡按钮时，菜单淡入，当您单击关闭按钮或其中一个链接时，菜单使用 CSS3 淡出。

【问题讨论】：

那么，你的代码现在做什么？
@JaromandaX 现在它在导入下的 handleClick 函数中崩溃。我可能没有正确设置函数。
你说崩溃了，浏览器开发者工具控制台中没有错误消息或其他有用的诊断消息？
嗯，是的。抱歉，我应该从一开始就提供这些信息。它不期望 handleClick 函数 ~/src/components/header/header.js 7:15 错误解析错误：意外的令牌，预期的“;”在第 7 行调用 handleClick 后无法识别分号
是的，我认为您编写代码的 waqy，您实际上并没有在那里声明 function - 我知道在 Class 定义中您以这种方式声明方法，但您没有'似乎不在类定义中，因此代码在语法上不正确（即看起来您正在尝试调用一个函数，然后有一个与该函数完全无关的代码块{}

标签： javascript reactjs hamburger-menu

【解决方案1】：

除了注释中指出的语法错误@JaromandaX，您还在函数组件中使用setState。就像现在一样，this 没有setState，我相信它指向的是模块本身。它应该指向一个已启动状态的 React 类组件：

class MyComponent extends React.Component {
  // gatsby default environment supports class properties
  state = {
      isOpen: false,
    }
  handleClick = () => this.setState({ ... }) // this is now MyComponent
  render() {
    return (...)
  }
}

或者你可以使用useState钩子。

【讨论】：