从数组数据有条件地渲染页面reactjs

Question

所以我尝试使用React来构建我的投资组合网站。 我希望我的项目（目前从数组中呈现）链接到项目概述页面，该页面将数组中的正确数据呈现到页面上。

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>
    )
}
}

我认为我需要使用一些条件渲染来获得我想要的东西，但我不知道从哪里开始。 我试图创建概述模板，但感觉我错过了一些东西。我知道在链接到页面时我需要ReactRouter的帮助，但除此之外，我被卡住了！任何帮助将不胜感激！ Link to Github

function ProjectsTemplate(props) {
return(
        <div>
            <div className="projectHero">
                <div className="projectHeading">
                    <h1>{props.name}</h1>
                    <div className="projectInfoLeft">
                        <div className="projectRole">
                            <h5>Role</h5>
                            <p>{props.type}</p>
                        </div>
                        <div className="projectTech">
                            <h5>Tech</h5>
                            <p>{props.tech}</p>
                        </div>
                        <div className="projectDate">
                            <h5>Date</h5>
                            <p>{props.date}</p>
                        </div>
                    </div>
                    <div className="projectInfoRight">
                        <div className="projectBrief">
                            <h5>Brief</h5>
                            <p>{props.brief}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

class ProjectsPage extends Component {
render() {
    return(
        <div>
            <div className="container">
                <Header />
                <ProjectsTemplate />
            </div>
        </div>
    );
}
}

Answer 1

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

然而，这并不完整，因为它只传递项目ID，而不是完整对象。我从来没有做过这样的事情，但以下似乎提供了一个解决方案： How to pass parameters in react-router-dom Link?

现在进行更改。

首先将ProjectsSection.js拆分为两个文件：一个包含ProjectsSection组件，另一个包含Project组件。

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

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>

在Project组件中，通过以下方式提取项目编号：

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

现在用对象替换id ...