在 react-carousel 中通过 graphql 加载的 gatsby-sharp 图像未激活答案

【问题标题】：gatsby-sharp images loaded via graphql in react-carousel not activated在 react-carousel 中通过 graphql 加载的 gatsby-sharp 图像未激活
【发布时间】：2021-01-17 20:22:05
【问题描述】：

我创建了一个 react-bootstrap 轮播，其中包含我通过 graphql 和 gatsby-image-sharp 加载的一些图像（源图像在 directus 中）。

我看到图像是在代码中创建的，但它们从未被分配“活动”类。当我将图像放在轮播之外时，它们正确显示在另一个下方，因此检索似乎工作正常。

如果我在 graphql 图像之前和/或之后手动添加项目，这些幻灯片会正确显示。

我还看到，如果我在 graphql 之前和之后放置一张幻灯片，则会显示第一张“正常”幻灯片，并且当事务开始时，我会在下一张静态幻灯片之前得到与生成的幻灯片数量相对应的延迟创建的幻灯片再次显示。

使用 react 开发工具检查站点时，我看到工作幻灯片的事务密钥为“.0”和“.2”，而它们之间的非工作幻灯片的事务密钥为“.1:0” :0”、“.1:0:1”等...：

React devtools tree

我用来生成它的代码如下：

import React from "react"
import { Row, Col, Container, Carousel } from "react-bootstrap"
import { graphql } from "gatsby"

import Layout from "../components/layout"
import SEO from "../components/seo"
import Img from "gatsby-image"

const IndexPage = ({ data }) => (
  <Layout pageInfo={{ pageName: `index` }}>
    <SEO title="Home" keywords={[`gatsby`, `react`, `bootstrap`]} />
    <Container className="text-center">
      <Row>
        <Col>
          <Carousel>
            <Carousel.Item>
              <div className="d-block w-100 gatsby-image-wrapper">
              <h1>test</h1>
              </div>
            </Carousel.Item>
            {data.allDirectusSlideshow.edges.map((slideShow) => {
              return slideShow.node.images.map((image) => {
                const sharp = data.allImageSharp.edges.find((imageSharp) => (
                  imageSharp.node.fluid.originalName === image.filename_disk))
                return <>
                  <Carousel.Item key={sharp.node.id}>
                    <h1>Image</h1>
                    <Img fluid={sharp.node.fluid} className="d-block w-100" />
                  </Carousel.Item>
                </>
              })
            })}
            <Carousel.Item>
              <h1>Test 2</h1>
            </Carousel.Item>
          </Carousel>
        </Col>
      </Row>
    </Container>
  </Layout>
)

export const query = graphql`
    query {
      allDirectusSlideshow(filter: {title: {eq: "Voorpagina"}}) {
        edges {
          node {
            title
            images {
              filename_disk
            }
          }
        }
      }
      allImageSharp {
        edges {
          node {
            id
            fluid {
              originalName
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  `
export default IndexPage

由于本站的directus api不公开，所以我放了一个生成的代码示例here（注意：只有主页有效）

【问题讨论】：

标签： graphql carousel gatsby react-bootstrap gatsby-image

【解决方案1】：

显然，bootstrap carousel 期望其项目是 carousel 的直接子项。这意味着反应片段在这里不起作用。

改变这个：

  return <>
              <Carousel.Item key={sharp.node.id}>
                <h1>Image</h1>
                <Img fluid={sharp.node.fluid} className="d-block w-100" />
              </Carousel.Item>
            </>

这样就解决了问题：

  return (
                  <Carousel.Item key={sharp.node.id}>
                    <h1>Image</h1>
                    <Img fluid={sharp.node.fluid} className="d-block w-100" />
                  </Carousel.Item>
                )

【讨论】：