Question

我正在尝试导入要与GatsbyJs一起使用的组件，并使其工作到一定程度，但是除幻灯片之外的其他“效果”均不起作用，并且没有错误消息，我也m使用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>
)

然后我将其称为布局，在这里我创建了外部容器和页面换行

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组件中。您需要将它们作为道具，并将其传递到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>
)

在GatsbyJs中使用React Burger菜单

1 个答案: