javascript - 在 GatsbyJs 中使用 React 汉堡菜单

Question

我正在尝试导入组件以将其与 GatsbyJs 一起使用并让它工作到一定程度，但除了幻灯片之外的其他“效果”不起作用，也没有错误消息，我也在使用 Styled Components .

这是我的代码，老实说我不知道​​这是 React-burge-menu 还是 GatsbyJs 的问题。

首先是组件，我必须将它包装在样式化的 div 上才能正常工作 as mention here

sidebar.js

import React from 'react'
import { scaleDown as BurgerMenu } from 'react-burger-menu'
import styled from 'styled-components'
import { Link } from 'gatsby'
import MenuLogo from '../assets/logos/letterlogo.png'

const StyledBurgerMenu = styled.div`
.bm-item {
    text-align:center;  
    display: inline-block;
    text-decoration: none;
    margin-bottom: 5vh;
    color: #d1d1d1;
    transition: color 0.2s;
}
.bm-item:hover {
    color: white;
}
.bm-burger-button {
    position: fixed;
    width: 30px;
    height: 15px;
    right: 2vw;
    top: 2vh;
}
.bm-burger-bars {
    background: #373a47;
}
.bm-cross-button {
    height: 30px;
    width: 15px;
}
.bm-cross {
    background: #bdc3c7;
}
.bm-menu {
    background: rgba(0, 0, 0, 0.3);
    padding: 2.5em 1.5em 0;
    font-size: 2em;
}
.bm-morph-shape {
    fill: #373a47;
}
.bm-item-list {
    color: #b8b7ad;
}

.bm-overlay {
    background: rgba(0, 0, 0, 0.3);
}
`

const Logo = styled.img`
width: 30vw;
display: block;
margin: auto;
`

export default () => (
  <StyledBurgerMenu>
    <BurgerMenu width='50%'>
      <Logo src={MenuLogo} />
      <Link to='/'>Testing</Link>
      <Link to='/'>Testing</Link>
      <Link to='/'>Testing</Link>
      <Link to='/'>Testing</Link>
    </BurgerMenu>
  </StyledBurgerMenu>
)

然后我将它调用到布局中，这里我同时创建了outer-container 和page-wrap

layout.js

import React from 'react'
import "normalize.css"
import styled from "styled-components"
import SideBar from "./sidebar"

const MainWrap = styled.div`
    height: 100vh;
    overflow: auto;
`;
const PageWrap = styled.div`
    text-align: center;
    overflow: auto;
    height: 100vh;
`;

export default ({children}) => (
  <MainWrap>
    <SideBar pageWrapId={"PageWrap"} outerContainerId={"MainWrap"}/>
    <PageWrap>
      {children}
    </PageWrap>
  </MainWrap>
)

也试过直接添加id:

export default ({children}) => (
  <MainWrap id={"outer-container"}>
    <SideBar pageWrapId={"page-wrap"} outerContainerId={"outer-container"}/>
    <PageWrap id={"page-wrap"}>
      {children}
    </PageWrap>
  </MainWrap>
)

这两种方式都有效，但只有幻灯片动画，我还将该布局调用到具有此代码的索引文件中:

index.js

import React from 'react'
import Layout from '../components/layout'
import { StaticQuery, graphql } from 'gatsby'
import styled from 'styled-components'
import { FaFacebook, FaInstagram, FaYoutubeSquare, FaTwitterSquare } from 'react-icons/fa'

const Hero = styled.div`
    margin-top: 20vh;
    `
const SocialLinks = styled.div`
    margin-top: 5vh;
    a{
        display: inline-block;
        margin: 1vw;
    }
`;
export default () => (
  <StaticQuery
    query={graphql`
      query HeadingQuery {
        site {
          siteMetadata {
            title
            description
            fb
            twitter
            youtube
            instagram
          }
        }
      }
    `}
    render={data => (
      <Layout>
        <Hero>
          <h1>{data.site.siteMetadata.title}</h1>
          <h2>{data.site.siteMetadata.description}</h2>
        </Hero>
        <SocialLinks>
            <a target="_blank" rel="noopener noreferrer" href={data.site.siteMetadata.fb}><FaFacebook size={50} color="black"/></a>
            <a target="_blank" rel="noopener noreferrer" href={data.site.siteMetadata.youtube}><FaYoutubeSquare size={50} color="black"/></a>
            <a target="_blank" rel="noopener noreferrer" href={data.site.siteMetadata.twitter}><FaTwitterSquare size={50} color="black"/></a>
            <a target="_blank" rel="noopener noreferrer" href={data.site.siteMetadata.instagram}><FaInstagram size={50} color="black"/></a>
        </SocialLinks>
      </Layout>
        )}
    />
)

这是使用该代码构建的一个实时示例，正如您将看到的那样，它可以正常工作，但不会缩小规模。 Demo

希望你能给我指出正确的方向。

提前致谢

Answer 1

恢复一个 2 年前的问题...

您正在将 pageWrapId 和 outerContainerId 传递到您的 SideBar 组件中。您需要将它们作为 props 传入 BurgerMenu 组件。

Github Docs

sidebar.js

export default ({pageWrapId, outerContainerId}) => (
  <StyledBurgerMenu>
    <BurgerMenu pageWrapId={pageWrapId} outerContainerId={outerContainerId} width='50%'>
      <Logo src={MenuLogo} />
      <Link to='/'>Testing</Link>
      <Link to='/'>Testing</Link>
      <Link to='/'>Testing</Link>
      <Link to='/'>Testing</Link>
    </BurgerMenu>
  </StyledBurgerMenu>
)