在 ReactJs 中动态生成对象作为网格答案

【问题标题】：Dynamically Generating objects as a grid in ReactJs在 ReactJs 中动态生成对象作为网格
【发布时间】：2020-06-18 22:14:45
【问题描述】：

我正在尝试在 ReactJs 中制作一个包含图像占位符网格的网页。首先，我制作了一个单独的组件作为占位符（在代码中命名为“CubeTemplate”）。 CubeTemplate.js:-

    import React, { Component } from 'react';
    
    /*change this css file name according your css*/
    import './Cubetemplate.css';
    
    
    class Cubetemplate extends Component {
    
        render (){
            return(
                <div className="simple">
                        <div className="container">
                            <div className="bigdivgal">
                                 <div className="cubeboxgal">
                                    <div className="boxcontentgal">
                                        <div className="innerimggal"><img src={`../images/${this.props.source}`}" /></div>
                                   </div>
                                </div>
                            </div
                        </div>
    
                    <div className="spacer2gal"></div>
                </div>
            )}
    };

export default Cubetemplate;

然后我在主组件（名为 Gallery.js）中添加了一个对象数组，以使用 map 函数发送到 CubeTemplate。 Gallery.js:-

    import React from 'react';
    import ReactDOM from 'react-dom';
    import Cubetemplate from './components/cubes/Cubetemplate';
    import './Gallery.css';
    
    
    const GALLERY = [
      {
        img: "1.jpg", title: "Fifty shades of Threta",
        name: "by Navin 'The Flash' Thamindu",
        date: "02/04/2026"
      },
      {
        img: "2.png", title: "Princess cosplay",
        name: "Suchalya Nasaraani",
        date: "05/06/2024"
      },
      {
        img: "3.jpg", title: "Threta theme live performance",
        name: "Tolmojith Bandara",
        date: "07/02/2024"
      },
  {
    img: "4.jpg", title: "3D printing threata action figures",
    name: "Udukaya Thisanka Niruwath ",
    date: "03/01/2023"
  },
  {
    img: "5.jpg", title: "Lovely Prince",
    name: "Disty Tidin Sinnakunji",
    date: "09/04/2022"
  },

    ];
    
    const Gallery = () => (
      
      <div className="gallerycontainer">
        <div className="container gal">
              {GALLERY.map(({img}, {name})  => (
                <Cubetemplate source={img}/>     
                ))}
        </div>
      </div>
    );
    
    export default Gallery;

现在，我遇到的问题是，我想将这些占位符框呈现为 a grid with 4 columns. 我尝试的一切都失败了。我应该怎么做才能获得这种效果？

仅供参考，这里是 CubeTemplate.css：

.cubeboxgal{
    width: 100%;
    height: 15rem;
    background: rgb(37, 37, 37);
    display: inline-block;}

.bigdivgal{
    width: 150%;
    padding-left: 50px;
}

.innerimggal{
    width: 96%;
    height: 14.5rem;
    background: rgb(255, 255, 255);
    display: inline-block; 
    align-items: center;
    top: 0.25rem;
    left: 0.18rem;
    background-image: url(./images/bg.jpg;   
    margin:2%;
}
.spacer2gal{
    margin: 1rem;
}
.simplediv{
    width:100%;
}

@media(max-width:768px){
    .innerimggal {
        display: none;
    }
    .boxcontentgal{
        top: 3rem;
        left:1%;
    }
}

【问题讨论】：

你试过CSS中的网格显示吗？ Complete Grid Guide

标签： javascript reactjs dictionary object

【解决方案1】：

在 CSS 中使用显示网格非常简单。

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <div className="displayGrid">
      {Array(24).fill(0).map(() => (<img className="gridItem" src="https://picsum.photos/200" />))}
    </div>
  </React.StrictMode>,
  rootElement
);

.displayGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1rem;
}

.gridItem {
  display: inline;
  height: 100px;
  width: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<body>
  <div id="root"></div>
</body>

【讨论】：