如何使用引导网格映射图像数组？

IT技术 wordpress reactjs bootstrap-4 graphql gatsby
2021-04-29 04:31:19

我正在用 gatsby.js 构建一个投资组合网站。所有照片都发布在 wordpress 中，由 graphQL 获取并渲染到网站。

我正在尝试使用引导程序网格来组织照片并使其具有响应性，但是因为 graphQL 返回一个包含从 wordpress 帖子中获取的所有图像的数组，所以我无法在使用数组时设置带有 class='row' 的 div 。地图。我不知道如何解决它。

从graphQL，我将分辨率设置为width=300px 和height=300px。

这是我发现组织尺寸的唯一方法，只要我不能使用类行并且所有图像都被视为一行。问题是照片尺寸没有响应，所以它总是300X300......

我想要一种方法使它成为一个网格系统，因为它应该可以工作......所以当我调整窗口大小时，所有照片都会被组织和调整大小。


const IndexPage = () => {
    const data = useStaticQuery(graphql`
        query {
            allWordpressPost {
                edges {
                    node {
                        title
                        featured_media {
                            localFile {
                                childImageSharp {
                                    resolutions(width: 300, height: 300) {
                                        src
                                        width
                                        height
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    `);
    const imagesResolutions = data.allWordpressPost.edges.map(
        (edge) => edge.node.featured_media.localFile.childImageSharp.resolutions
    );
    return (
        <Layout>
            <Jumbotron />
            <div className="container">
                <h1 className="my-5 text-center">Portfolio</h1>
                {imagesResolutions.map((imageRes) => (
                    <Img className="col-sm-6 col-lg-4 img-rounded img" resolutions={imageRes} key={imageRes.src} />
                ))}
            </div>
        </Layout>
    );
};
1个回答

如果将data.allWordpressPost.edges数组拆分为分块数组，则可以循环遍历外部数组进行渲染rows，并遍历每个内部数组进行渲染cols。

对于 3 列引导网格，您希望传入 3 的大小值（这是lodash.chunk本示例中的第二个参数）。这确保每个块的长度为 3。

这是一个简单的例子，忽略了 graphql、childImageSharp 和 gatsby-image 的使用。

import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import arrayChunk from 'lodash.chunk';
import 'bootstrap/dist/css/bootstrap.min.css';

const IndexPage = () => {

  const rawData = [1, 2, 3, 4, 5, 6];
  const chunkedData = arrayChunk(rawData, 3)

  return (
    <div>
      <div className="container">
        {chunkedData.map((row, rowIndex) => {
          return (<div key={rowIndex} className="row">{
            row.map((col, colIndex) => {return (<div key={colIndex} className="col-sm">{col}</div>)})
          }</div>)
        }
        )}
      </div>
    </div>
  );
};

ReactDOM.render(<IndexPage />, document.getElementById('root'));

闪电战

其它你可能感兴趣的问题
上一篇如何覆盖react引导颜色？ 下一篇Gatsby 开发失败：错误：找不到module“gatsby-cli/lib/reporter”