Question

我正在尝试将图像通过GraphicQL传递给我的Banner组件，它是一个片段组件。.此代码在我的index.js中有效，但是在尝试创建新组件时不起作用。

我也尝试了class componennt，但结果相同

import React from 'react';
import Img from 'gatsby-image';
import { graphql } from 'gatsby'

const Banner = ({ data }) => (
    <div className="imageContainer">
         {console.log(data)}
            <Img fluid={data.image1.childImageSharp.fluid}/>
            <Img fluid={data.image2.childImageSharp.fluid}/>
            <Img fluid={data.image3.childImageSharp.fluid}/> 
    </div>
)

export const bannerImg = graphql`
   fragment bannerImg on File {
    childImageSharp {
      fluid{
        ...GatsbyImageSharpFluid
      }
    }
  }
`

export const query = graphql`
query {
    image1: file(relativePath: { eq: "images/one.jpg" }){
      ...bannerImg
    }

    image2: file(relativePath: { eq: "images/two.jpg" }){
      ...bannerImg
    }

    image3: file(relativePath: { eq: "images/three.jpg" }){
      ...bannerImg
    }
  }
`

export default Banner;

我希望某些东西可以作为道具通过，但组件什么也没收到

Answer 1

检查docs for StaticQuery

import React from 'react'
import { StaticQuery, graphql } from 'gatsby'
import Img from 'gatsby-image'

export const bannerImg = graphql`
   fragment bannerImg on File {
    childImageSharp {
      fluid{
        ...GatsbyImageSharpFluid
      }
    }
  }
`

const Banner () => (
  <StaticQuery
    query={graphql`
      query BannerQuery {
        image1: file(relativePath: { eq: "images/one.jpg" }){
          ...bannerImg
        }

        image2: file(relativePath: { eq: "images/two.jpg" }){
          ...bannerImg
        }

        image3: file(relativePath: { eq: "images/three.jpg" }){
          ...bannerImg
        }
      }
    `}
    render={data => (
      <div className="imageContainer">
        <Img fluid={data.image1.childImageSharp.fluid}/>
        <Img fluid={data.image2.childImageSharp.fluid}/>
        <Img fluid={data.image3.childImageSharp.fluid}/> 
      </div>
    )}
  />
)

export default Banner

如何使用gatsby将数据从graphicQL传递到React组件？

1 个答案: