Reactjs 从数组数据有条件地呈现页面

所以我正试图用React to practice来构建我的投资组合网站。 我想让当前从数组呈现的项目链接到一个项目概述页面，该页面可将数组中的正确数据呈现到该页面上

const data = [
        {
    'name': 'Cady Studios',
    'date': 'January 2018',
    'type': 'UI/UX | Front End Development',
    'imageUrl': require('../images/projectOneImage.png'),
    'link': '',
    'brief': '',
    'tech': '',
},
    {
    'name': 'SWP Connect',
    'date': 'March 2018',
    'type': 'UI/UX',
    'imageUrl': require('../images/projectTwoImage.png'),
    'link': '',
    'brief': '',
    'tech': '',
},
{
    'name': 'Carzilla',
    'date': 'November 2017',
    'type': 'UI/UX',
    'imageUrl': require('../images/projectThreeImage.png'),
    'link': '',
    'brief': '',
    'tech': '',
},
{
    'name': 'Stone Mountain Park',
    'date': 'September 2017',
    'type': 'UI/UX',
    'imageUrl': require('../images/projectFourImage.png'),
    'link': '',
    'brief': '',
    'tech': '',
    }   
];


function Project(props){
return (
    <div>
        <a href={props.link} >
        <div className="project">
            <figure className="effect-sadie">
                <img className="projectImage img-fluid"
                    src={props.imageUrl}
                    alt={props.name}
                    />
                <figcaption>
                        <div className="projectInfoSmall">
                            <div className="projectType"><p>{props.type}</p></div>
                        </div>
                        <div className="projectTitle"><h2>{props.name}</h2></div>
                </figcaption>
            </figure>
        </div>
        </a>
    </div>
);
}

class ProjectsSection extends Component {
constructor(props) {
    super(props)
    this.state = {
        works: []
    }
}

componentWillMount() {
    this.loadWork()
}

loadWork() {
    const works = []
    data.map(item => works.push(item))
    this.setState({ works })
    setTimeout(() => {
        console.log(this.state)
    }, 2000)
}

render() {
    const projects = this.state.works.map((project, index) => <div className="grid"><Project 
            name={project.name}
            date={project.date}
            type={project.type}
            imageUrl={project.imageUrl}
            link={project.link}
            brief={project.brief}
            tech={project.tech}
            key={index}
        /></div>)

    return (
        <div className="container">
            <div className="project-section">
                <h2>Recent Projects</h2>
                    { projects }
                </div>
            </div>
    )
}
}

const数据=[
{
“名称”：“凯迪工作室”，
“日期”：2018年1月，
“类型”：“UI/UX |前端开发”，
“imageUrl”：需要（“../images/projectOneImage.png”），
“链接”：“，
“简介”：“，
“技术”：“，
},
{
“名称”：“SWP连接”，
“日期”：2018年3月，
“类型”：“UI/UX”，
“imageUrl”：需要（“../images/projectTwoImage.png”），
“链接”：“，
“简介”：“，
“技术”：“，
},
{
“name”：“Carzilla”，
“日期”：2017年11月，
“类型”：“UI/UX”，
“imageUrl”：需要（“../images/projectThreeImage.png”），
“链接”：“，
“简介”：“，
“技术”：“，
},
{
‘名称’：‘石山公园’，
“日期”：2017年9月，
“类型”：“UI/UX”，
“imageUrl”：需要（“../images/projectFourImage.png”），
“链接”：“，
“简介”：“，
“技术”：“，
}   
];
功能项目（道具）{
返回(
);
}
类ProjectsSection扩展组件{
建造师（道具）{
超级（道具）
此.state={
作品：[]
}
}
组件willmount（）{
这是loadWork（）
}
负荷工作（）{
const works=[]
data.map（item=>works.push（item））
this.setState（{works}）
设置超时（（）=>{
console.log（this.state）
}, 2000)
}
render（）{
const projects=this.state.works.map（（项目，索引）=>）
返回(
近期项目
{项目}
)
}
}

我假设我需要使用一些条件渲染来获得我想要的，但我不确定从哪里开始。 我试图创建概述模板，但有一种感觉，我遗漏了一些东西。我知道我需要ReactRouter的帮助才能链接到页面，但除此之外，我被卡住了！任何帮助都将不胜感激

功能项目模板（道具）{
返回(
{props.name}
角色
{props.type}

技术人员
{props.tech}

日期
{props.date}

简明的
{props.brief}

);
}
类ProjectsPage扩展组件{
render（）{
返回(
);
}
}

我相信以下是正确的方向。。。这不是完整的代码，但它给出了想法。我没有测试代码，如果需要的话，我会让你做任何更改

但是，这是不完整的，因为它只传递项目id，而不是完整的对象。我从来没有做过这样的事，但下面似乎提供了一个解决方案：

现在来看看变化。 首先，将

ProjectsSection.js

拆分为两个文件：一个包含

ProjectsSection

组件，另一个包含

Project

组件

在App.js中，包含两个单独的组件，然后将现有代码（如果相关）更改为以下代码：

import { BrowserRouter, Route, Switch } from 'react-router-dom';

以及：

---

现在用object替换id…你得到渲染了什么吗？是的，我已经在主页上正确地渲染了项目。我只是不知道如何将项目数据传递到项目概述页面，这取决于在主页上单击哪个项目。您是否在项目的div中定义了onClick？这个onclick应该切换到项目的路由。我还没有定义onclick处理程序。这是否会覆盖整个项目部门？你能给我举个例子吗？谢谢你的帮助，非常好的反馈@Rahamin。我感谢你花时间举个例子！这让我更清楚地了解需要什么。非常感谢。当然希望它能起作用。我只是想给你一个钩子，没有时间给你鱼：）顺便说一句，如果你使用redux，你只能传递数字，两个组件都可以访问全局状态…所以经过一天的修补，我走得更远了一点，但不断遇到错误。添加此常量projectId=this.props.match.params.projectId时；我收到一条错误消息，说“无法读取未定义的属性'props'。我想我看到的是“用object替换id”这句话“我弄糊涂了。如果可以，你能详细说明一下吗？事情似乎正在呈现，路由器工作正常。只是数组对象中的数据没有被传递到项目页面。我有进展了。缓慢而稳定。现在，我已经让项目根据其id将正确的信息呈现到单独的页面上。现在转到onClick事件上！：）刚刚看到你9小时前的留言。。。我从来没有经过一个物体，所以它可能也需要我的时间。。但你2小时前的留言似乎表明你是一个人在做这件事。根据我的经验，自己努力解决问题在下一个项目中会有回报。

import { BrowserRouter, Route, Switch } from 'react-router-dom';

  <BrowserRouter>
        <Route path="/" component={Header} />
        <Route path="/" component={Hero} />
        <Switch>
          <Route exact path="/" component={ProjectSection} />
          <Route path="/Projects/:projectId" component={Project} />
      </Switch>
  </BrowserRouter>

const projectId = this.props.match.params.projectId;