![](/img/trans.png)
[英]Hero banner carousel with Gatsby + Contentful + react responsive carousel
[英]How to include a carousel component in Gatsby with Contentful?
我想在我的 Gatsby 项目中包含一个图像轮播。 所有图像都将从 Contentful 查询。
我使用了“react-responsive-carousel”并设法让它直接导入图像。 我也确信我可以成功地提取内容丰富的图像,而无需将其放入轮播组件中。
任何人都可以帮我解决这个问题吗? 似乎 gatsby-image 组件 Img 没有返回“react-responsive-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 = {
您看到的错误来自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} alt="Image"></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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.