我在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张图片（街道，休闲，运动），并希望在第二个return语句中渲染该部件3次（每张图片1张），每次都动态加载背景图片以及内容。
2 console.log（）语句按预期打印。
console.log(props.stylesItem[image].name)
console.log(image)
THE CANVAS
street
THE CLASSIC
casual
THE PERFORMER
athletic
但是，没有任何内容呈现到屏幕上，并且我没有看到任何错误。我究竟做错了什么？
在此先感谢您的帮助
您的渲染道具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>
</>
)
})
}}
/>
)
}
Arrow功能不值一提的是
当箭头函数中唯一的语句是时
return，我们可以删除return和删除周围的花括号
(param1, param2, …, paramN) => expression
// equivalent to: => { return expression; }
因此，上面的渲染道具StaticQuery可以进一步简化为：
render={data =>
Object.keys(data).map(imageTitle => {...})
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句