反应汉堡菜单

Question

我是新来的反应，仍然只是掌握一些概念。我正在尝试添加一个汉堡菜单组件，效果很好，但我对如何将菜单添加到汉堡组件本身感到困惑。

这里是代码

render() {
    
    const [isOpen, setOpen] = useState(false);
  
    const {
      installationsSection,
      selectedInstallationIndex,
    } = this.state;

    return (
      <div className="apollo-premier">
        <Helmet>
          <title>Apollo Premier</title>
          <meta property="og:title" content="Apollo Premier" />
        </Helmet>

        {this.renderHeader(true)}
        {this.renderHeader(false)}

        <div className="content">
          <div className="hero-container">
            <img className="background" src={PremierHeroBackgroundAnimated} />
            <img className="paint-background" src={PremierHeroPaint} />
            <div className="text">
              <p className="large">Breakthrough technology meets high-end design</p>
              <div className="divider"><div></div></div>
              <p>Apollo Premier is an elevated patent protected digital display for those who want to introduce the finest digital art into their home or business.</p>
              <p>Apollo Premier houses your digital motion art collection to bring digital into a physical environment to enjoy your digital library.</p>
              <p>A superior display experience, completely customized to each space and integrates seamlessly into smart home technology.</p>
            </div>
          </div>

          <div className="section flex center the-process-section">
            <div className="left">
              <h2>The Process</h2>
              <p>This customization process gives you complete control of the layout, functionality, and design of your Premier Display inside your space. We take you through the concept and implementation of each build meticulously from start to finish.</p>
              <p>An array of material and layout options are available to select from to create an authentic and unique installation each and every time. The exclusive finishing touches, including lighting, music, power, and framing, can be customized for each setting.</p>
              <div className="cta yellow"><a href="mailto:concierge@theapollo.com?subject=Inquiry for Apollo Premier Installation">Inquire within</a></div>
            </div>
            <div className="right">
              {/* <div className="the-process-steps">
                <div className="the-process-step">
                  <img src="http://placehold.it/160x160" />
                  <p>Lorem ipsum dolor sit amet, consectetur</p>
                </div>
                <div className="the-process-step">
                  <img src="http://placehold.it/160x160" />
                  <p>Lorem ipsum dolor sit amet, consectetur</p>
                </div>
                <div className="the-process-step">
                  <img src="http://placehold.it/160x160" />
                  <p>Lorem ipsum dolor sit amet, consectetur</p>
                </div>
                <div className="the-process-step">
                  <img src="http://placehold.it/160x160" />
                  <p>Lorem ipsum dolor sit amet, consectetur</p>
                </div>
              </div> */}
              <div className="the-process-placeholders">
                <img src={PremierProcessPlaceholder1} />
                <img src={PremierProcessPlaceholder2} />
              </div>
            </div>
          </div>

          <section className="section center installations">
            {installationsSection && installationsSection.installations && <React.Fragment>
              <h2>Customize</h2>
              <p>Apollo Premier displays are completely bespoke and designed by in-house teams of architects for the most discerning homes and spaces.</p>
              <Carousel
                className="installations-carousel"
                showThumbs={false}
                showStatus={false}
                showArrows={false}
                swipeable={true}
                selectedItem={selectedInstallationIndex}
                onChange={this.updateSelectedInstallation}
              >
                {installationsSection.installations.map((installation, i) => <PremierInstallationItem key={i} installation={installation} />)}
              </Carousel>
            </React.Fragment>}
          </section>

          <div className="hero-container premier-plus">
            <img className="background" src={PremierPlusBackground} />
            <img className="paint-background" src={PremierPlusPaint} />
            <div className="text">
              <img src={ApolloPremierPlusLogo} alt="Apollo Premier Plus" />
              <p className="inverted">Apollo Premier+ is the art lover's membership you have been waiting for, packed with exclusive access to events, fairs, artists and their work. A community with like minded individuals passionate about contemporary art.</p>
              <div className="cta blue"><a href="mailto:concierge@theapollo.com?subject=Inquiry for Apollo Premier Installation">Inquire for more information</a></div>
            </div>
          </div>

          <div className="section center membership-benefits">
            <h2>Membership<br />Benefits</h2>
            <div className="divider"><div></div></div>
            <div className="benefits-container">
              <div>
                <p className="title">Community</p>
                <p className="sub-title">Events</p>
                <p className="text">Members will enjoy access to prestigious events and member only programming</p>
              </div>

              <div>
                <p className="title">Access</p>
                <p className="sub-title">Unleashed Buying Power</p>
                <p className="text">Members will have a 24 hour preview window of new digital NFT work before anyone else. </p>
              </div>

              <div>
                <p className="title">Connection</p>
                <p className="sub-title">Networking</p>
                <p className="text">Meet like minded individuals that can lead to life-changing collaborations and relationships.</p>
              </div>

            </div>
          </div>

        </div>

        <div className="intro-footer">
          <div className="logo">
            <img src={ApolloLogo} />
          </div>
          <p></p>
          <p></p>
          <p>
            215 W. Huron Suite 1
            <br />
            Chicago, IL 60554
          </p>
        </div>

        {installationsSection && installationsSection.installations && installationsSection.installations.map((installation, i) => <InstallationItemPopup key={i} installation={installation} />)}
      </div>
    );
  }

  renderHeader = (fixed: boolean) => {
    return (
      <div className={'header' + (fixed ? ' fixed' : '')}>
        <div className="pencil-banner">
          <div className="apollo-logo"><a href="https://www.theapollo.com/"><img src={ApolloLogoBlack} alt="Apollo" /></a></div>
          <div className="concierge">
            {/* <img src={IconSupportBlack} /> <span>Concierge</span> */}
          </div>
          <div className="contact">
            <span>+1-877-790-1411</span> <span className="divider">|</span> <a href="mailto:info@theapollo.com">Contact</a>
          </div>
        </div>
        <div className="nav">
          <div className="logo">
            <img src={ApolloPremierLogo} alt="Apollo Premier" />
          </div>
          <div className="nav-links">
          <Hamburger toggled={isOpen} toggle={setOpen}>
          <a href="https://www.theapollo.com/app">Apollo App</a>
          <a href="https://www.theapollo.com/">Apollo Art</a>
          <a href="/">Apollo Premier</a>
          </Hamburger>
            <div>
      </div>
          </div>
        </div>
      </div>
    );
  }
}

Hamburger 显然是创建菜单的位置。

但我无法获得链接的下拉列表：

Answer 1

我在尝试上面的代码时遇到了钩子错误

render() {

   const [isOpen, setOpen] = useState(false);

^ 因为你定义了一个render() 方法，这意味着你有一个类组件。钩子（如useState）应该在函数组件中使用。

你不需要类组件中的钩子，你可以简单地使用this.setState()方法来更新状态和生命周期方法来代替其他钩子。