javascript - 希望 react-hamburger-menu 图标位于与汉堡包图标具有相同行为的容器中

Question

希望 react-hamburger-menu 图标位于与汉堡包图标具有相同行为的容器中（例如具有 100% 宽度和纯色背景的标题）。首先在它周围包裹一个固定的 div 来尝试它，但这似乎不起作用。

import React from "react"
import logo from "../images/favicon.ico"
import { slide as Menu } from "react-burger-menu"

class Hamburger extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      menuOpen: false,
    }
    this.handleStateChange = this.handleStateChange.bind(this)
    this.closeMenu = this.closeMenu.bind(this)
  }

  // This keeps your state in sync with the opening/closing of the menu
  // via the default means, e.g. clicking the X, pressing the ESC key etc.
  handleStateChange(state) {
    this.setState({ menuOpen: state.isOpen })
  }

  // This can be used to close the menu, e.g. when a user clicks a menu item
  closeMenu() {
    this.setState({ menuOpen: false })
  }

  render() {
    return (
      <div id="outer-container" className="hamburger--fixed-header">
        <Menu
          outerContainerId={ "outer-container" }
          isOpen={this.state.menuOpen}
          onStateChange={state => this.handleStateChange(state)}
        >
          <a
            href="#top"
            onClick={() => this.closeMenu()}
            aria-label="home"
            className="logo__link"
          >
            <img
              src={logo}
              alt="'nuffsaid logo"
              className="hamburger--logo"
            />
          </a>
          <a href="#top" onClick={() => this.closeMenu()} className="menu-item">
            Home
          </a>
          <a
            href="#product"
            className="menu-item"
            onClick={() => this.closeMenu()}
          >
            Product
          </a>
          <a href="#about" className="menu-item" onClick={() => this.closeMenu()}>
            About
          </a>
          <a
            href="#request"
            className="menu-item"
            onClick={() => this.closeMenu()}
          >
            Request Access
          </a>
        </Menu>
      </div>
    )
  }
}

export default Hamburger

CSS -

.hamburger--fixed-header {
  position: fixed !important;
  top: 0 !important;
  background-color: yellow !important;
  width: 100% !important;
}

想知道我可以使用的 react-burger-menu 中是否有内置的类/id。

标签： javascripthtmlcssreactjs

Answer 1

您可以使用参考例如

 class Hamburger extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      menuOpen: false,
    }
    this.handleStateChange = this.handleStateChange.bind(this)
    this.closeMenu = this.closeMenu.bind(this)

    this.myRef = React.createRef();

  }

  // This keeps your state in sync with the opening/closing of the menu
  // via the default means, e.g. clicking the X, pressing the ESC key etc.
  handleStateChange(state) {
    this.setState({ menuOpen: state.isOpen })
  }

  // This can be used to close the menu, e.g. when a user clicks a menu item
  closeMenu() {
    this.setState({ menuOpen: false })
  }

  render() {
    return (
      <a onClick={() => this.myRef.current.onStateChange(state => this.handleStateChange(state))} id="outer-container" className="hamburger--fixed-header">
        <Menu
          ref={this.myRef}
          outerContainerId={ "outer-container" }
          isOpen={this.state.menuOpen}
          onStateChange={state => this.handleStateChange(state)}
        >
          <a
            href="#top"
            onClick={() => this.closeMenu()}
            aria-label="home"
            className="logo__link"
          >
            <img
              src={logo}
              alt="'nuffsaid logo"
              className="hamburger--logo"
            />
          </a>
          <a href="#top" onClick={() => this.closeMenu()} className="menu-item">
            Home
          </a>
          <a
            href="#product"
            className="menu-item"
            onClick={() => this.closeMenu()}
          >
            Product
          </a>
          <a href="#about" className="menu-item" onClick={() => this.closeMenu()}>
            About
          </a>
          <a
            href="#request"
            className="menu-item"
            onClick={() => this.closeMenu()}
          >
            Request Access
          </a>
        </Menu>
      </a>
    )
  }
}

export default Hamburger