Javascript 将React Burger菜单与GatsbyJs一起使用

我正在尝试导入组件以使用它，并使其工作到某一点，但除了幻灯片之外的其他“效果”不起作用，并且没有错误消息，我也正在使用

这是我的代码，老实说，我不知道这是React burge菜单还是GatsbyJs的问题

首先是组件，我必须将其包装在一个样式化的div上，以使其工作

侧边栏.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>
)

从“React”导入React
从“反应汉堡菜单”导入{scaleDown as BurgerMenu}
从“样式化组件”导入样式化
从“盖茨比”导入{Link}
从“../assets/logos/letterlogo.png”导入菜单Go
const StyledBurgerMenu=styled.div`
.bm项目{
文本对齐：居中；
显示：内联块；
文字装饰：无；
边缘底部：5vh；
颜色：#d1d1；
过渡：颜色0.2s；
}
.bm项目：悬停{
颜色：白色；
}
.bm汉堡按钮{
位置：固定；
宽度：30px；
高度：15px；
右：2vw；
顶部：2vh；
}
.bm汉堡吧{
背景：#373a47；
}
.bm交叉按钮{
高度：30px；
宽度：15px；
}
.bm十字架{
背景：#bdc3c7；
}
.bm菜单{
背景：rgba（0,0,0,0.3）；
填充：2.5em1.5em0；
字号：2em；
}
.bm变形形状{
填充：#373a47；
}
.bm项目列表{
颜色：#b8b7ad；
}
.bm覆盖层{
背景：rgba（0,0,0,0.3）；
}
`
const Logo=styled.img`
宽度：30vw；
显示：块；
保证金：自动；
`
导出默认值（）=>(
测试
测试
测试
测试
)

然后我将其调用到布局中，在这里我创建了外部容器和页面包装

layout.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>
)

从“React”导入React
导入“normalize.css”
从“样式化组件”导入样式化
从“/SideBar”导入侧栏
const MainWrap=styled.div`
高度：100vh；
溢出：自动；
`;
const PageWrap=styled.div`
文本对齐：居中；
溢出：自动；
高度：100vh；
`;
导出默认值（{children}）=>(
{儿童}
)

还尝试直接添加id：

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

导出默认值（{children}）=>(
{儿童}
)

在这两种情况下，它都可以工作，但仅限于幻灯片动画，我还将该布局调用到包含以下代码的索引文件：

index.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>
)

从“React”导入React
从“../components/Layout”导入布局
从“gatsby”导入{StaticQuery，graphql}
从“样式化组件”导入样式化
从'react icons/fa'导入{FaFacebook、FaInstagram、FaYoutubeSquare、FaTwitterSquare}
const Hero=styled.div`
边际上限：20vh；
`
const SocialLinks=styled.div`
边缘顶部：5vh；
a{
显示：内联块；
利润率：1vw；
}
`;
导出默认值（）=>(
(
{data.site.siteMatadata.title}
{data.site.siteMatadata.description}
)}
/>
)

下面是一个使用该代码构建的实例，正如您将看到的那样，它可以工作，但不会缩小。

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

---

提前感谢

重新提出一个2年前的问题

您正在将

pageWrapId

和

outerContainerId

传递到

侧栏中。您需要将它们作为道具，并将它们传递到
菜单中


侧边栏.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>
)

导出默认值（{pageWrapId，outerContainerId}）=>(
测试
测试
测试
测试
)