如何在内容丰富的 Gatsby 中包含轮播组件？

Posted 2023-03-08

【中文标题】如何在内容丰富的 Gatsby 中包含轮播组件？

【英文标题】：How to include a carousel component in Gatsby with Contentful?

【发布时间】：2019-08-07 01:45:18

【问题描述】：

我想在我的 Gatsby 项目中包含一个图像轮播。所有图像都将从 Contentful 查询。

我使用了“react-responsive-carousel”并设法使其与直接导入图像一起工作。我也确信我可以成功提取内容图像，而无需将其放入轮播组件中。

谁能帮我解决这个问题？似乎 gatsby-image 组件 Img 没有返回“react-reponsive-carousel”可以识别的标签。或者你知道任何其他可以工作的旋转木马吗？

我的代码：

import React,  Component, Fragment  from "react"

import "react-responsive-carousel/lib/styles/carousel.min.css"
import  Carousel  from "react-responsive-carousel"
import  graphql  from "gatsby"
import Img from "gatsby-image"

import tourimg from "../images/tour-1.jpg"  //Import an image directly

export default class ApartmentPage extends Component 
  render() 
    const photos = this.props.data.allContentfulRooms.edges[0].node.photos
    return (
      <Carousel>
        photos.map(photo => 
          const  fixed  = photo
          return (
            <div>
              <Img fixed=fixed />
              /* <img src=tourimg /> */
            </div>
          )
        )
      </Carousel>
    )
  


export const ROOM_QUERY = graphql`
  
    allContentfulRooms 
      edges 
        node 
          id
          name
          photos 
            fixed(width: 150, height: 150) 
              ...GatsbyContentfulFixed_tracedSVG
            
          
        
      
    
  
`

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

错误信息：

TypeError: Cannot read property 'map' of null
Thumbs.renderItems
node_modules/react-responsive-carousel/lib/components/Thumbs.js:174
  171 | value: function renderItems() 
  172 |     var _this2 = this;
  173 | 
> 174 |     return this.state.images.map(function (img, index) 
  175 |         var itemClass = _cssClasses2.default.ITEM(false, index === _this2.state.selectedItem && _this2.state.hasMount);
  176 | 
  177 |         var thumbProps = 

【问题讨论】：

该错误消息看起来与您在此处共享的代码来自不同的地方？

【参考方案1】：

您看到的错误来自react-responsive-carousel 的拇指组件。尽管该组件可以满足子 div 中的任何内容，但是，要使缩略图起作用，它需要一个 img 标签。由于使用 gatsby 您必须使用 <Img> 组件，您可以通过禁用缩略图来解决此问题

<Carousel showThumbs=false />

以下是一个完整的工作示例（使用 Typescript）：

import * as React from "react";
import Img from "gatsby-image";
import  graphql, StaticQuery  from "gatsby";

import "react-responsive-carousel/lib/styles/carousel.min.css";
import  Carousel  from "react-responsive-carousel";


interface childImageSharpNode 
  childImageSharp: 
    fluid: any;
  ;

interface SlideShowComponentProps 
  nodes: childImageSharpNode[];


class SlideShowComponent extends React.Component<SlideShowComponentProps> 
  constructor(props: SlideShowComponentProps) 
    super(props);
  

  render() 
    const images: any[] = [];
    for (const node of this.props.nodes) 
      images.push(
        <div>
          <Img fluid=node.childImageSharp.fluid ></Img>
        </div>,
      );
    

    return (
      <Carousel showThumbs=false infiniteLoop=true autoPlay=true>
        images
      </Carousel>
    );
  


interface StaticQueryProps 
  allFile: 
    nodes: childImageSharpNode[];
  ;


const SlideShow: React.FC = () => (
  <StaticQuery
    query=graphql`
      query slideshow 
        allFile(filter:  relativePath:  regex: "/slideshow/"  ) 
          nodes 
            childImageSharp 
              fluid(maxWidth: 1024) 
                ...GatsbyImageSharpFluid
              
            
          
        
      
    `
    render=(data: StaticQueryProps) => <SlideShowComponent nodes=data.allFile.nodes></SlideShowComponent>
  />
);

export default SlideShow;