React Slick Slider href 总是指向同一个链接

Posted 2023-02-25

【中文标题】React Slick Slider href 总是指向同一个链接

【英文标题】：React Slick Slider href always points to the same link

【发布时间】：2020-12-28 12:37:51

【问题描述】：

我有以下滑块

 const Slides = () => 
      const data = useStaticQuery(graphql`
      query Slider 
        allPrismicSlider 
          nodes 
            data 
              slider 
                alternative_text
                image 
                  url
                
                link 
                  slug
                
              
            
          
        
            
      `)

      const slides = [
        
          uid: data.allPrismicSlider.nodes[0].data.slider[0].link.slug,
          url: data.allPrismicSlider.nodes[0].data.slider[0].link.slug,
          src: data.allPrismicSlider.nodes[0].data.slider[0].image.url,
          alt: data.allPrismicSlider.nodes[0].data.slider[0].alternative_text,
        ,
        
          uid: data.allPrismicSlider.nodes[0].data.slider[1].link.slug,
          url: data.allPrismicSlider.nodes[0].data.slider[1].link.slug,
          src: data.allPrismicSlider.nodes[0].data.slider[1].image.url,
          alt: data.allPrismicSlider.nodes[0].data.slider[1].alternative_text,
        ,
        
          uid: data.allPrismicSlider.nodes[0].data.slider[2].link.slug,
          url: data.allPrismicSlider.nodes[0].data.slider[2].link.slug,
          src: data.allPrismicSlider.nodes[0].data.slider[2].image.url,
          alt: data.allPrismicSlider.nodes[0].data.slider[2].alternative_text,
        ,
        
          uid: data.allPrismicSlider.nodes[0].data.slider[3].link.slug,
          url: data.allPrismicSlider.nodes[0].data.slider[3].link.slug,
          src: data.allPrismicSlider.nodes[0].data.slider[3].image.url,
          alt: data.allPrismicSlider.nodes[0].data.slider[3].alternative_text,
        
      ]
      return (
        <Slider ...settings>
          slides.map(slide => <Link to=`projects/$slide.url`><div key=slide.uid><img src=slide.src alt=slide.alt/></div></Link>)
        </Slider>
      )
    

正如您所见，每张幻灯片都有不同的链接，但是每当幻灯片发生变化时，似乎最上面的幻灯片总是在顶部并且不透明度会发生变化。我已尝试遵循此修复：https://github.com/akiran/react-slick/issues/1400 但它似乎没有修复错误。

任何建议都会非常有帮助。

谢谢。

编辑：根据要求编写沙箱代码 - https://codesandbox.io/s/adoring-margulis-847rn?file=/src/components/gallery.js

【问题讨论】：

尝试在Link 组件中添加key 属性。

@Chandan 这没有修复错误

【参考方案1】：

将此添加到您的 CSS：

.slick-slide 
  visibility: hidden;

.slick-slide.slick-active 
  visibility: visible;

这对我有用。

【讨论】：

就像这个答案一样简单?

【参考方案2】：

key 值应该在可迭代包装器中使用，而不是在子级中，因为 React 使用它来检测哪个元素已更改。

    <Slider ...settings>
      slides.map(slide => <Link key=slide.uid to=`projects/$slide.url`><div><img src=slide.src alt=slide.alt/></div></Link>)
    </Slider>

来自文档：

Keys 帮助 React 识别哪些项目已更改、添加或正在更改 删除。键应该给数组内的元素以给出 元素一个稳定的身份

【讨论】：

你能提供一个 CodeSandbox 吗？

我添加了一个 CodeSandbox

由于缺少滑块包，沙箱似乎无法编译（我已尝试安装包）

我明白了，请在修复后返回并尝试添加编辑权限：)