时间戳

首页 > 解决方案 > 使用 gatsby 博客数据在循环内渲染一个反应组件

reactjs - 使用 gatsby 博客数据在循环内渲染一个反应组件

问题描述

我有我的组件 Images.js

function Images() {
  return (
    <StaticQuery
    query={query}
    render={data => (
        <div>
          {data.allImageSharp.nodes.map(image => (
            <img
              className="w-40 h-40 object-cover object-center"
              src={image.fluid.src}
              alt="random user"
            
            />
          ))}
        </div>
    )}
  />
  );
}
export default Images;

现在它基本上返回 6 个图像。当我尝试按以下方式为每张卡片渲染图像时，当然，它不起作用：

function Blog() {
  return (
    <div className="min-h-screen overflow-hidden">
        <Navbar />
      <div className="max-w-4xl mx-auto py-12 lg:py-16 ">
        <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
          <span className="block">Coming soon!</span>
          <span className="block text-indigo-600">I am just learning stuff about headless CMS and will build a blog here with strapi.io. Hang in!</span>
        </h2>
      </div>
      <StaticQuery
        query={query}
        render={data => (
          <div className="p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-5">
            
              {data.allStrapiArticles.edges.map(({ node:article })=> (
                <div className="rounded overflow-hidden shadow-lg">
                  <Images />
                  <ConsoleLog>{ Images }</ConsoleLog>
                  <h3 key={article.strapiId}>{article.title}</h3>
                </div>
              ))}
            
          </div>
        )}
      />
    <Footer />
    </div>
  );
}
export default Blog;

在此处输入图像描述

有没有办法使用这个组件为每张卡片显示一个图像？也许有钥匙？

标签： reactjs

解决方案

你也在映射你的图像，所以基本上发生的事情是你所有的图像都在一张卡上渲染 n 次（n 是你的数组的长度），你遇到的问题是<Images/>

建议

您可以更改查询的结构并将图像数据包含到文章数据中，并将图像 URL 作为道具传递给图像组件，它应该看起来像这样

function Images({src}) {
  return (
   
        <div>
          
            <img
              className="w-40 h-40 object-cover object-center"
              src={src}
              alt="random user"
            
            />
          
        </div>
    )}
  />
  );
}
export default Images;

和这样的博客组件

{data.allStrapiArticles.edges.map(({ node:article })=> (
                <div className="rounded overflow-hidden shadow-lg">
                  <Images src={article.img} />
                  <ConsoleLog>{ Images }</ConsoleLog>
                  <h3 key={article.strapiId}>{article.title}</h3>
                </div>
              ))}

推荐阅读