无法正确渲染项目卡。 Reactjs Gatsbyjs Graphql

Posted 2023-03-08

【中文标题】无法正确渲染项目卡。 Reactjs Gatsbyjs Graphql

【英文标题】：Can't render project cards properly. Reactjs Gatsbyjs Graphql

【发布时间】：2020-06-18 00:14:06

【问题描述】：

我正在尝试使用 gatsbyjs 创建一个投资组合网站，但我目前在使用 graphql 和 gatsby image sharp 创建项目卡时遇到问题。我不确定是我的 css 还是我的 js。

基本上，我有一个项目页面，它从本地 JSON 文件获取数据，然后将数据传递给卡片组件，然后在项目页面上呈现。我有卡片容器的css网格，但问题是卡片组件似乎无法识别网格并且只是溢出或者它们只是向下/穿过页面。有点难以解释。还在学习啊哈。我只想在上面放 3 张卡片，然后在下面放 3 张卡片。

https://github.com/verv0022/portfolio

they seem to take up the entire grid space even though i have a width?

项目页面

const Projects = () => 
const data = useStaticQuery(graphql`
 query ProjectsQuery 
  allProjectsJson 
    edges 
      node 
        id
        name
        description
        url
        image 
          childImageSharp 
            fluid 
              ...GatsbyImageSharpFluid
            
          
        
      
    
  



 `)
   const projects = data.allProjectsJson.edges

   console.log(projects)

     return (
    <section className="projects">
      <main className="projects-content">
        <ScrollAnimation
          className="projects-title"
          animateOnce=true
          animateIn="slideInLeft"
          animatePreScroll=false
          initiallyVisible=false
        >
          <h2>Here are some of my projects...</h2>
          </ScrollAnimation>

        <section className="project-preview-container">
          <div className="project-preview-item-container">
            projects.map(( node: project ) => 
              return (
                <ProjectPreviewItem
                  key=project.id
                  name=project.name
                  description=project.description
                  imageData=project.image.childImageSharp.fluid
                  url=project.url
                />
              )
            )
          </div>
        </section>
      </main>
    </section>
  )


export default Projects

卡片组件

import React from "react"
import Image from "gatsby-image"
import "./Projects.css"

const ProjectPreviewItem = ( name, imageData, description, url ) => 
  return (
    <div className="project-item">
      <div className="image-container">
        <Image fluid=imageData alt=name className="project-img"></Image>
      </div>
      <div className="project-item-details">
        <h2 className="project-url">
          <a href=url>name</a>
        </h2>
        <p className="project-description">description</p>
      </div>
    </div>
  )


export default ProjectPreviewItem

CSS

body,
html 
  margin: 0;
  padding: 0;

* 
  box-sizing: border-box;


.projects 
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  display: grid;
  height: 100vh;


.projects-content 
  grid-area: 2 / 2 / 6 / 6;


.projects-title 
  font-size: 26px;


.project-preview-container 
  grid-area: 3 / 2 / 6 / 6;
  margin-top: 6rem;
  background-color: lightgray;


/* .project-preview-item-container 

 */

.projects-title 
  width: 40rem;


.project-item 
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: black solid 2px;
  padding: 1rem;
  margin: 1rem;
  width: 250px;
  height: auto;


.project-item-details 
  margin-top: 20px;


@keyframes slideInLeft 
  from 
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  

  to 
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  

【参考方案1】：

您的标记目前看起来像这样。

.projects
    .projects-content
      .project-preview-container
        .project-item
        .project-item
        .project-item

但应该是这样的。

.projects
  .project-item
  .project-item
  .project-item

网格项必须是网格的子项。

.projects 
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  background-color: lightgray;


.project-item 
  border: 1px solid black;
  height: 80px;
  background: white;

<div class="projects">
  <div class="project-item">One</div>
  <div class="project-item">Two</div>
  <div class="project-item">Three</div>
  <div class="project-item">Four</div>
  <div class="project-item">Five</div>
  <div class="project-item">Six</div>
</div>

阅读Basic Concepts of Grid Layout

【讨论】：

谢谢，我明白了。我拥有容器 div 的原因是因为我试图嵌套网格以在两侧留出边距。我只是使用边距而不是这样做并使其变得简单。我想我得多读一下网格了。