условное отображение страниц из массива данных

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 в связывании со страницей, но помимо этого я застрял! Любая помощь будет оценена! Ссылка на 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

Я считаю, что следующее в правильном направлении ... Это не полный код, но он дает идею. Я не проверял код, я оставляю вам возможность вносить любые изменения, если это необходимо.

Это, однако, не завершено, так как он передает только идентификатор проекта, а не полный объект. Я никогда не делал ничего подобного, но, похоже, решение дает следующее: Как передать параметры в Act-router-dom Link?

Теперь об изменениях.

Начните с разделения ProjectsSection.js на два файла: один с компонентом ProjectsSection, другой с компонентом Project.

В App.js включите два отдельных компонента, а затем измените существующий код (при необходимости) на следующий код:

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 на объект ...