1

我在 Gatsbyjs 项目中有以下组件：

styleItem.js

import React from 'react'
import styled from 'styled-components'
import BackgroundImage from 'gatsby-background-image'
import {StaticQuery, graphql } from "gatsby"
import {Col } from 'react-bootstrap'

import '../styles/styles.css'

const StyleItem = (props) => {
    return (
        <StaticQuery 
            query={graphql`
                query {
                    street: file(relativePath: { eq: "2.jpg" }) {
                        childImageSharp {
                        fluid(quality: 90, maxWidth: 1920) {
                            ...GatsbyImageSharpFluid_withWebp
                            }
                        }
                    }
                    casual: file(relativePath: { eq: "3.jpg" }) {
                        childImageSharp {
                        fluid(quality: 90, maxWidth: 1920) {
                            ...GatsbyImageSharpFluid_withWebp
                            }
                        }
                    }
                    athletic: file(relativePath: { eq: "3.jpg" }) {
                        childImageSharp {
                        fluid(quality: 90, maxWidth: 1920) {
                            ...GatsbyImageSharpFluid_withWebp
                            }
                        }
                    }
                }
            `}

            render={data => { Object.keys(data).map((image, i ) => {

                    console.log(props.stylesItem[image].name)
                    console.log(image)
                    return (
                        <Col md={4}>
                            <div class="style-box">
                                <StyledBackgroundImage
                                    Tag="div"
                                    className="style-box-img"
                                    fluid={data[image].childImageSharp.fluid}
                                >
                                </StyledBackgroundImage>
                                <div class="style-text-box">
                                    <h5 class="h5">{props.stylesItem[image].style}</h5>
                                    <h3 class="h3 style-description">{props.stylesItem[image].name}</h3>
                                    <div class="extra-style-details">
                                        <p class="style-short-desc">{props.stylesItem[image].tagline}</p>
                                        <p>{props.stylesItem[image].text}</p>
                                        <ul class="hashtag-list">
                                            <li class="style-attribut"></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </Col>
                        )
                    })
                }
            }
        />
    )
}

export default StyleItem

const StyledBackgroundImage = styled(BackgroundImage)`
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
`

我将以下道具传递给该组件（abc 虚拟字符串以提高可读性）：

    stylesItem: {
            street: {
                style: "// STREET",
                name: "THE CANVAS",
                tagline: "abc",
                text: "abc",
                hashtags: [
                    "abc", "abc", "abc", "abc"
                ]
            },
            casual: {
                style: "// CASUAL",
                name: "THE CLASSIC",
                tagline: "abc",
                text: "abc",
                hashtags: [
                    "abc", "abc", "abc", "abc", "abc", "abc"
                ]
            },
            athletic: {
                style: "// ATHLETIC",
                name: "THE PERFORMER",
                tagline: "abc",
                text: "abc",
                hashtags: [
                    "abc", "abc", "abc", "abc", "abc", "abc"
                ]
            }
        }

我正在使用 Gatsby 的 Staticquery 加载 3 张图像（街头、休闲、运动），并希望在第二个返回语句中渲染该部分 3 次（每个图像 1 次），每次都动态加载背景图像以及内容。

2 个 console.log() 语句按预期打印出来。

console.log(props.stylesItem[image].name)
console.log(image)

THE CANVAS
street
THE CLASSIC
casual
THE PERFORMER
athletic

然而，没有任何东西被渲染到屏幕上，我也没有看到任何错误。我究竟做错了什么？

在此先感谢您的帮助

4

1 回答 1

0

你的渲染道具StaticQuery不会返回任何东西，因此不会渲染任何东西。

在StaticQuery渲染道具中，您正在映射查询数据的键，然后成功生成一堆 JSX。但是请注意，您实际上并没有对它做任何事情，因为没有返回结果 JSX。

所以整个StyleItem组件做了一堆工作然后不渲染任何东西，因为它唯一渲染的是StaticQuery.

const StyleItem = ({ stylesItem }) => {
  return (
    <StaticQuery
      query={graphql`
        query {
          street: file(relativePath: { eq: "1.png" }) {
            childImageSharp {
              fluid(quality: 90, maxWidth: 1920) {
                ...GatsbyImageSharpFluid_withWebp
              }
            }
          }
          casual: file(relativePath: { eq: "2.png" }) {
            childImageSharp {
              fluid(quality: 90, maxWidth: 1920) {
                ...GatsbyImageSharpFluid_withWebp
              }
            }
          }
          athletic: file(relativePath: { eq: "3.png" }) {
            childImageSharp {
              fluid(quality: 90, maxWidth: 1920) {
                ...GatsbyImageSharpFluid_withWebp
              }
            }
          }
        }
      `}
      render={data => {
        // Make sure to return something here
        return Object.keys(data).map(imageTitle => {
          const fluidProp = data[imageTitle].childImageSharp.fluid
          const imageData = stylesItem[imageTitle]
          return (
            <>
              <StyledBackgroundImage
                Tag="div"
                className="style-box-img"
                fluid={fluidProp}
              ></StyledBackgroundImage>
              <div>
                <h5>{imageData.style}</h5>
                <h3>{imageData.name}</h3>
                <p>{imageData.tagline}</p>
                <p>{imageData.text}</p>
              </div>
            </>
          )
        })
      }}
    />
  )
}

箭头函数毫无价值的是

当箭头函数中的唯一语句是return时，我们可以删除return和删除周围的大括号

(param1, param2, …, paramN) => expression  
// equivalent to: => { return expression; }

所以上面的 render prop onStaticQuery可以进一步简化为：

render={data =>
  Object.keys(data).map(imageTitle => {...})
}
于 2020-05-10T03:26:32.757 回答