盖茨比图像背景滑块触发器类型错误：无法读取未定义的属性'style'

Question

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

同样的英雄最初也起了作用，但在开发过程中，它开始出现这个错误。我重新安装了软件包，尝试了一个新的helloworld项目，使用相同的代码。

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

根据文档(以及其他示例(推断，添加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>
}

请注意，如果没有沙箱，您可能需要对代码片段进行一点调整，尤其是使用stylesprop，但您已经明白了。