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

Question

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

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

谁能告诉我这里做错了什么，或者如何解决这个问题？我有 app.js 向 header.js 提供道具。

谢谢！

App.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>
      </>
  );
}
}

Header.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>

Answer 1

您是说汉堡包菜单的图标变化缓慢且有故障吗？我查看了该网站，菜单看起来很适合我。

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

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

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

以及 span、span::before 和 ::after 的白线样式。您也可以 transform 这些线来交叉它。我建议这个解决方案可以让事情更快一些

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

What's the best way to create a hamburger menu from scratch in Reactjs without using Hooks?

state

onclick

reactjs

hamburger-menu