Gatsby-image-background-slider 触发 TypeError: Cannot read property 'style' of undefined

Question

我在我的项目中使用gatsby-image-background-slider，它会触发TypeError: Cannot read property 'style' of undefined changeIndex src/index.js:111 callback src/index.js:129。

最初是同一个英雄，但在开发过程中，它开始出现此错误。我已经重新安装了软件包，尝试使用相同代码的新 hello-world-project。

    Hero.js

    import React from "react"
    import { useStaticQuery, graphql } from "gatsby"
    import BackgroundSlider from 'gatsby-image-background-slider'
    
    const Hero = ({ children }) => (
      <>
        <main>{children}</main>
        <BackgroundSlider
          query={useStaticQuery(graphql`
            query {
              backgrounds: allFile (filter: {sourceInstanceName: {eq: "backgrounds"}}){
                nodes {
                  relativePath
                  childImageSharp {
                    fluid (maxWidth: 4000, quality: 100){
                      ...GatsbyImageSharpFluid
                    }
                  }
                }
              }
            }
          `)}
          initDelay={2}
          transition={4}
          duration={8}
          images={["picture2.jpg", "picture2.jpg"]}
        >
        </BackgroundSlider>
      </>
    )
    
    export default Hero

你知道是什么原因造成的吗？

Answer 1

As it's inferred from the documentation（以及其他示例），似乎添加initDelay、transition 或durationprops 会强制组件也接收styleprops。由于您没有传递它，它会破坏依赖代码。

如果您不打算添加任何 style 属性，您可以简单地使用虚拟样式，例如：

    <BackgroundSlider
      query={useStaticQuery(graphql`
        query {
          backgrounds: allFile (filter: {sourceInstanceName: {eq: "backgrounds"}}){
            nodes {
              relativePath
              childImageSharp {
                fluid (maxWidth: 4000, quality: 100){
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      `)}
      initDelay={2}
      transition={4}
      duration={8}
      style={{`display: initial`}}
      images={["picture2.jpg", "picture2.jpg"]}
    >
    </BackgroundSlider>

---

由于该插件维护程度低且没有提供更好的示例，我建议在gatsby-background-image 中使用自定义<div> 结构以及另一个轮播依赖项，例如React Slick Slider。比如：

const SimpleSlider=()=> {
  const data = useStaticQuery(graphql`
      query {
          backgrounds: allFile (filter: {sourceInstanceName: {eq: "backgrounds"}}){
              nodes {
                  relativePath
                  childImageSharp {
                      fluid (maxWidth: 4000, quality: 100){
                          ...GatsbyImageSharpFluid
                      }
                  }
              }
          }
      }
  `)

  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };

  return <div>
      <h2> Single Item</h2>
      <Slider {...settings}>
        { backgrounds.nodes.map(background =>{
            return <BackgroundImage
              Tag="section"
              className={`yourClassName`}
              fluid={background.childImageSharp.fluid}
              backgroundColor={`#040e18`}
              style={{`height:100%; width:100%`}}
            />
          })}
      </Slider>
    </div>
}

请注意，如果没有沙箱，您可能需要调整一点 sn-p，尤其是使用 styles prop，但您明白了。