[英]React, gatsbyjs: Looping through object - Component doesn't get rendered
I have the following component in a Gatsbyjs project:我在 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;
`
I'm passing in the following props to this component (abc dummy strings for better readability):我将以下道具传递给该组件(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"
]
}
}
I'm using Gatsby's Staticquery to load in 3 images (street, casual, athletic) and want to render the part in the second return statement 3 times (1 for each image), each time with the background image loading in dynamically as well as the content.我正在使用 Gatsby 的 Staticquery 加载 3 张图像(街头、休闲、运动),并希望在第二个返回语句中渲染该部分 3 次(每个图像 1 次),每次都动态加载背景图像以及内容。
The 2 console.log() statements print out as expected. 2 个 console.log() 语句按预期打印出来。
console.log(props.stylesItem[image].name)
console.log(image)
THE CANVAS
street
THE CLASSIC
casual
THE PERFORMER
athletic
However nothing gets rendered to the screen and I'm not seeing any errors.然而,没有任何东西被渲染到屏幕上,我也没有看到任何错误。 What am I doing wrong?我究竟做错了什么?
Thanks in advance for your help在此先感谢您的帮助
Your render prop on StaticQuery
doesn't return anything, and therefore doesn't render anything.您在StaticQuery
上的渲染道具不会返回任何内容,因此不会渲染任何内容。
In the StaticQuery
render prop you are mapping over the keys of the queried data, then generating a bunch of JSX successfully.在StaticQuery
渲染道具中,您正在映射查询数据的键,然后成功生成一堆 JSX。 But notice you are not actually doing anything with it because the resulting JSX doesn't get returned.但是请注意,您实际上并没有对它做任何事情,因为没有返回结果 JSX。
So the entire StyleItem
component does a bunch of work and then doesn't render anything, because the only thing it renders is StaticQuery
.所以整个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>
</>
)
})
}}
/>
)
}
Something worth nothing with Arrow functions is that 箭头函数毫无价值的是
when the only statement in an arrow function is
return
, we can removereturn
and remove the surrounding curly brackets当箭头 function 中的唯一语句是return
时,我们可以删除return
并删除周围的大括号
(param1, param2, …, paramN) => expression
// equivalent to: => { return expression; }
So the above render prop on StaticQuery
could be further simplified as:所以上面的StaticQuery
渲染道具可以进一步简化为:
render={data =>
Object.keys(data).map(imageTitle => {...})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.