Как я могу использовать начальную сетку, отображающую массив изображений?

Question

Я создаю веб-сайт портфолио с gatsby.js.Все фотографии публикуются в WordPress, извлекаются с помощью GraphQL и отображаются на веб-сайте.

Я пытаюсь использовать загрузочную сетку, чтобы упорядочить фотографии и сделать их отзывчивыми, но потому что GraphQL возвращает массив со всеми изображениями, извлеченными изСообщения WordPress, я не могу установить div с class = 'row', так как я использую array.map.И я не знаю, как ее решить.

Из 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>
    );
};

Answer 1

Если вы разделите ваш массив data.allWordpressPost.edges на массив chunked , вы можете перебрать внешний массив для рендеринга rows и каждый из внутренних массивов для рендеринга cols.

Для сетки начальной загрузки с 3 столбцами вы должны передать значение размера 3 (это 2-й параметр 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'));

stackblitz