时间戳

首页 > 解决方案 > 在不使用 Hooks 的情况下，在 Reactjs 中从头开始创建汉堡菜单的最佳方法是什么？

reactjs - 在不使用 Hooks 的情况下，在 Reactjs 中从头开始创建汉堡菜单的最佳方法是什么？

问题描述

我正在尝试使用 state 和 onClick 在 React 中从头开始创建一个汉堡菜单。我没有使用 React Hooks 的经验，所以我试图避免这种情况。我现在的解决方案有效，但速度慢且有故障，我觉得代码有很大缺陷。

无论如何，我还是部署了它以进行实时测试，但它在移动 chrome 浏览器（ https://vigilant-leavitt-a88a0e.netlify.app/）中根本无法正常工作。（尽管在移动尺寸的浏览器上检查时至少背景颜色有效）。

谁能告诉我我在这里做错了什么，或者如何清理？我有 app.js 向 header.js 提供道具。

谢谢！

应用程序.js

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      menuOpen: false
    };
  }

  componentDidMount() {
    this.setState({
      menuOpen: false
    });
  }
    

  handleMenuClick = () => {
    this.setState({ menuOpen: true });
  }

  handleCloseMenuClick = () => {
    this.setState({ menuOpen: false });
  }

  render() {
  return (
    <>
      <Router>
        <Header
          menuOpen={this.state.menuOpen}
          handleMenuClick={this.handleMenuClick}
          handleCloseMenuClick={this.handleCloseMenuClick} />
        <Switch>
          <Route path="/resources"><Resources /></Route>
          <Route path="/team"><Team /></Route>
          <Route path="/faq"><Faq /></Route>
          <Route path="/fees"><Fees /></Route>
          <Route path="/"><Home /></Route>
        </Switch>
        <Footer />
      </Router>
      </>
  );
}
}

页眉.js

<div className="header__navburger">
                    {props.menuOpen === false ?
                    (<img
                            className="header__hamburger-icon"
                            alt="Menu"
                        src={menuicon}
                        onClick={() => props.handleMenuClick()}
                        />) :
                        (<div className="header__navburger-close">
                            <img
                            className="header__close-icon"
                            alt="Close Menu"
                            src={closeicon}
                            onClick={() => props.handleCloseMenuClick()}
                            />
                            <nav className="header__nav-list"> 
                                <Link to={`/home`} className="header__nav-link"
                                onClick={() => props.handleCloseMenuClick()}>Home</Link>
                                <Link to={`/resources`} className="header__nav-link"
                                onClick={() => props.handleCloseMenuClick()}>Patient Resources</Link>
                                <Link to={`/team`} className="header__nav-link"
                                onClick={() => props.handleCloseMenuClick()}>Meet the Team</Link>
                                <Link to={`/faq`} className="header__nav-link"
                                onClick={() => props.handleCloseMenuClick()}>FAQ</Link>
                                <Link to={`/fees`} className="header__nav-link"
                                onClick={() => props.handleCloseMenuClick()}>Fees</Link> 
                            </nav>
                            </div>
                        )}
                </div>

标签： reactjsonclickstatehamburger-menu

解决方案

您的意思是汉堡菜单图标变化缓慢且有故障吗？我查看了该站点，菜单看起来对我来说相当不错。

首先，你不需要在setState你的componentDidMount()，因为你应该constructor在初始化发生的那一刻设置状态。这将强制以相同的状态渲染组件两次，并且是某些工作有点慢的原因。

其次，您是否将图像用于汉堡菜单图标？下载图像也需要一些时间，我认为这就是为什么单击汉堡菜单时我没有及时看到菜单交叉的原因。还有其他方法可以制作这样的菜单，例如它可能只是

<div class="burger-menu">
   <span></span>
</div>

span和，span::before和::after白线的样式。您也可以transform将这些线交叉起来。我建议这个解决方案可以让事情工作得更快一点

推荐阅读