javascript - 硬编码英雄幻灯片到 gatsby-image-plugin

Question

我的“主页英雄幻灯片”是我网站的最后一个硬编码部分。我想让它变得动态并使用 gatsby-image-plugin 的魔力。

我的网站链接

“硬编码”代码：

HeroSlider.js

import React, { useState } from 'react'
import { useInterval } from './useInterval'
import Hero1 from '../../images/hero1.webp'
import Hero2 from '../../images/hero2.webp'
import Hero3 from '../../images/hero4.webp'

const HeroSlider = () => {

  const slides = [
    {
      id: '01',
      image: Hero1
    },
    {
      id: '02',
      image: Hero2
    },
    {
      id: '03',
      image: Hero3
    }
  ]

  const [state, setState] = useState({
    slides,
    activeIndex: 0,
    autoSlide: true,
    interval: 3000
  })

  // By Dan Abramov overreacted.io
  useInterval(
    () => {
      setState(prev => ({
        ...prev,
        activeIndex: (prev.activeIndex + 1) % prev.slides.length
      }))
    },
    state.autoSlide ? state.interval : null
  )

  return (
    <SliderWrapper>
      {slides.map((slide, i) => (
        <Slide key={slide.id} slide={slide} active={state.activeIndex === i} />
      ))}
    </SliderWrapper>
  )
}

export default HeroSlider

HeroSlider.styles.js

import styled from 'styled-components'

export const StyledImg = styled.div`
  background: ${props =>
    `linear-gradient(
      to bottom, rgba(32, 33, 35, .8)
      39%,rgba(32, 33, 35, .8)
      41%,rgba(32, 33, 35, .8)
      100%
    ),
    url('${props.image}'), var(--darkGrey)`};

幻灯片.js

import React from 'react'

import { StyledImg, WbnSlide } from './HeroSlider.styles'

const Slide = ({ slide, active }) => (
  <WbnSlide className={active ? 'active' : ''}>
  
  
  <StyledImg image={slide.image} />
   
   
   <div className="wbn-overlay-text">
      <h1 className="wbn-header">Desenvolvimento Front End</h1>
      <p className="wbn-text">
        A mágica do React em suas aplicações com performance e design incríveis,
        para voce alcançar seus objetivos de negócio.
        <button type="button" className="sldie-button">
          <span>COMECE AGORA</span> entre em contato
        </button>
      </p>
    </div>
  </WbnSlide>
)

export default Slide

我正在查询为将图像添加到幻灯片而创建的 ACF：

query HomeSlidesQuery {
  wpPage(databaseId: {eq: 13}) {
    id
    ACF_HomePage {
      slideimages {
        slide {
          localFile {
            childImageSharp {
              gatsbyImageData(formats: WEBP, layout: FULL_WIDTH, placeholder: BLURRED)
            }
          }
        }
      }
    }
  }
}

返回一个数组：

{
  "data": {
    "wpPage": {
      "id": "cG9zdDoxMw==",
      "ACF_HomePage": {
        "slideimages": [
          {
            "slide": {
              "localFile": {
                "childImageSharp": {
                  "gatsbyImageData": {
                    "layout": "fullWidth",
                    "placeholder": {
                      "fallback":  
                   

我不知道如何使用这些数据来替换我的硬编码数组和样式组件“StyledImg”中的道具。我尝试了几种方法，但没有奏效。

标签： javascriptreactjsgatsby

Answer 1

这应该有效：

import React, { useState } from 'react'
import { useInterval } from './useInterval'
import Hero1 from '../../images/hero1.webp'
import Hero2 from '../../images/hero2.webp'
import Hero3 from '../../images/hero4.webp'

const HeroSlider = ({data}) => {

  const [state, setState] = useState({
    data.wpPage.ACF_HomePage.slideimages,
    activeIndex: 0,
    autoSlide: true,
    interval: 3000
  })

  // By Dan Abramov overreacted.io
  useInterval(
    () => {
      setState(prev => ({
        ...prev,
        activeIndex: (prev.activeIndex + 1) % prev.slides.length
      }))
    },
    state.autoSlide ? state.interval : null
  )

  return (
    <SliderWrapper>
      {data.wpPage.ACF_HomePage.slideimages.map({slide}, i) => (
        <Slide key={i} slide={slide} active={state.activeIndex === i} />
      ))}
    </SliderWrapper>
  )
}


query HomeSlidesQuery {
  wpPage(databaseId: {eq: 13}) {
    id
    ACF_HomePage {
      slideimages {
        slide {
          localFile {
            childImageSharp {
              gatsbyImageData(formats: WEBP, layout: FULL_WIDTH, placeholder: BLURRED)
            }
          }
        }
      }
    }
  }
}


export default HeroSlider

然后，按照您要查询的结构：

import React from 'react'

import { StyledImg, WbnSlide } from './HeroSlider.styles'

const Slide = ({ slide, active }) => {
 console.log("slide data", slide);

 return <WbnSlide className={active ? 'active' : ''}>
  
  
  <StyledImg image={slide.localFile.childImageSharp.gatsbyImageData} />
   
   
   <div className="wbn-overlay-text">
      <h1 className="wbn-header">Desenvolvimento Front End</h1>
      <p className="wbn-text">
        A mágica do React em suas aplicações com performance e design incríveis,
        para voce alcançar seus objetivos de negócio.
        <button type="button" className="sldie-button">
          <span>COMECE AGORA</span> entre em contato
        </button>
      </p>
    </div>
  </WbnSlide>
}

export default Slide

假设您的查询检索到正确的数据，您只需要遍历幻灯片 ( slideimages)。我解构了嵌套slide，但想法是一样的。然后你只需要知道你的 styled-component 通过 props 接收到的每个slide组件Slide（我放置 a 的地方console.log()）。

检查useInterval钩子以确保正确设置状态，因为您的数据结构可能已更改。另请注意，您没有idnow，您可能希望以某种方式将其包含在您的 WordPress 中，目前，我使用 index ( i) 作为keyeach slide。