Question

我正在制作带有React的基本作品集，并且正在利用道具来展示我所做的每个项目。项目通过卡组件显示在主页上。单击特定项目后，我想获取（单击的）项目的ID并将其信息（例如名称和类别）显示在横幅组件中，该横幅组件随后将显示在“项目”页面中。我才刚开始使用React，所以尽管它可能很简单，但是我对它的工作方式感到困惑。

Home.js

function createCard(project) {
  return <Card 
    key={project.id} 
    name={project.name}
    img={project.img}
  />
}

function Home() {

  return (
      <div className="grid-container">
         {projects.map(createCard)}  
       </div>
      )
}

export default Home;

Projects.js

const projects = [
  {
    id: 1,
    name: "Dissertation Project",
    img: thumb1,
    tech: ["HTML", "SCSS"],
    category: ["Web Development", "Usability Testing"]
  },

  {
    id: 2,
    name: "Cinema Booking System",
    img: thumb2,
    tech: "",
    category: [""]
  }
]
export default projects;

Banner.js

import React from 'react';
import thumb from '../images/thumb-1.jpg';

function Banner (props) {
  return(
    <React.Fragment>
      <div class="project__banner">
        <h2 class="project__banner-heading">{props.name}</h2>
      </div>
      <div class="project__desc">
        <div class="project__desc--1">{props.category[0]}</div>
        <div class="project__desc--2">{props.category[1]}</div>
      </div>
    </React.Fragment>
  )
}

export default Banner;

Project.js

import React from 'react';
import Banner from '../Banner';

function  Project () {

  return (
    <React.Fragment>
      <Banner />
    </React.Fragment>
    
  )
}

export default Project;

我希望这很清楚。任何帮助将不胜感激。

React-通过ID在不同页面中显示详细信息

0 个答案: