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

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

我试图使用引导网格来组织照片并使其响应，但由于graphQL返回一个包含从wordpress帖子中获取的所有图像的数组，因此在使用array.map时，我无法使用class='row'设置div。我不知道怎么解决它

从graphQL中，我将分辨率设置为宽度=300px，高度=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>
    );
};

常量索引页=（）=>{
常量数据=useStaticQuery（graphql`
质疑{
allWordpressPost{
边缘{
节点{
标题
特色媒体{
本地文件{
childImageSharp{
分辨率（宽：300，高：300）{
src
宽度
高度
}
}
}
}
}
}
}
}
`);
const imagesResolutions=data.allWordpressPost.edges.map(
（edge）=>edge.node.featured_media.localFile.childImageSharp.resolutions
);
返回(
文件夹
{imagesResolutions.map（（imagesres）=>(
))}
);
};

如果将

数据.allWordpressPost.edges

数组拆分为一个分块数组，则可以循环外部数组以渲染

行

，并循环每个内部数组以渲染

列

对于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 dom”导入ReactDOM；
从“React”导入React，{Component}；
从“lodash.chunk”导入arrayChunk；
导入'bootstrap/dist/css/bootstrap.min.css'；
常量索引页=（）=>{
常量rawData=[1,2,3,4,5,6]；
常量chunkedData=arrayChunk（原始数据，3）
返回(
{chunkedData.map（（行，行索引）=>{
返回({
map（（col，colIndex）=>{return（{col}）}）
})
}
)}
);
};
ReactDOM.render（，document.getElementById（'root'））；

---

你解决了这个问题吗？@ksav我刚试过，效果很好！谢谢