反应 + CSS 网格 + MongoDB？答案

【问题标题】：React + CSS Grid + MongoDB?反应 + CSS 网格 + MongoDB？
【发布时间】：2020-05-24 05:47:30
【问题描述】：

我正在创建一个网页，用户可以在其中将内容发布到“公告板”。这些帖子将被设置为框，我想将它们添加到网格布局中。这是我的代码：

import React from 'react';
//import Gallery from "./components/gallery.component"
function App() {
  state = {
    posts = []; 
  };
  componentDidMount = () => {
    this.getPosts();
  };
  getPosts = () => {
    axios.get('(server)')
      .then((response) => {
        const data = response.data;
        this.setState({ posts: data });
      })
  }
  displayBlogPost = (posts) => {
    if (!posts.length) return null;
    return posts.map((post, index) => (
      <div key={index} className="post__display">
        <h3>"name " + this.state.name </h3>
      </div>
    ));
  };
  render() {
      return (
            <div className="App">
        <header className="container">
          Logo
        </header>
            </div>
        <div className="gallery"> 
        {this.displayBlogPost(this.state.posts)} </div> 
    )
  }
}
export default App;

我有点不确定如何在网格上工作。我一直在研究 CSS Grid 文档，我想知道是否足以让我的代码保持原样并创建一个带有 id #gallery 的 css 文件来设置网格的属性（显示、网格间隙、重复等）。这是否足够，或者我必须更改我的 displayBlogPost 功能。我担心这种方法会考虑只包含一个元素的画廊，因此甚至不会有网格。

希望得到一些澄清和建议，我试图在网上找到示例，但似乎没有一个使用 react、mongodb 和 css grid。

这也很难，因为我是 React、MongoDB 和 JavaScript 的新手，但这个项目是针对黑客马拉松的，而我正处于时间紧迫的状态

【问题讨论】：

标签： html css reactjs mongodb gridview

【解决方案1】：

即使帖子只包含一个元素，HTML DOM 也会在其自身中显示网格。是的，您可以创建一个单独的 CSS 文件并包含 req.那里的 CSS。另外，

"name" + this.state.name

你还没有定义状态“name”，你期望在那里显示价值？

【讨论】：