Каков наилучший способ обработки состояния / реквизита, если я хочу получить и отобразить отдельный компонент при нажатии на указанную ссылку c?

Question

Я создал CodeSandbox, чтобы я мог уточнить свой вопрос. Я хотел бы попросить ваше предложение по моему проекту:

В настоящее время у меня есть приложение для портфолио, которое разделено на 4 страницы:

1. Загрузка. js напрямую fetch -> Home. js

2. О. js

3. Контакт. js

4. Работа. js - отображает ссылку на мои проекты, открывающую скользящую боковую панель / боковой ящик

.

То, что я хотел Нужно выбрать отдельные компоненты проекта и передать их на скользящей боковой панели после того, как пользователь нажал на указанный проект c.

Мой вопрос: каков наилучший способ управления состоянием? как передать реквизиты из проекта, по которому щелкнули, и отобразить указанный компонент проекта c из папки компонентов?

CodeSandbox Link <---- </a>

Answer 1

обновленная работа. js

import React, { useState } from "react";

import StyledWorkNav from "./StyledWorkNav";
import SideDrawer, { StyledDrawer } from "./SideDrawer";
import Project1 from "./components/Project1";
import Project2 from "./components/Project2";
import Project3 from "./components/Project3";

const Work = () => {
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [projects, setProjects] = useState([
        { name: 'Project 1', projId: '1', dataText: 'Proj 1', comp:"" },
    { name: 'Project 2', projId: '2', dataText: 'Proj 2', comp:"Project2" },
    { name: 'Project 3', projId: '3', dataText: 'Proj 3', comp:"Project3" },
    ]);
    const [selectedProject, setSelectedProject] = useState(null);

  const strToComponent = {
    Project1: <Project1/>,
    Project2: <Project2/>,
    Project3: <Project3/>
  }






  const openDrawerHandler = () => {
    if (!drawerOpen) {
      setDrawerOpen(true);
    } else {
      setDrawerOpen(false);
    }
  };

  const closeDrawerHandler = () => {
    setDrawerOpen(false);
  };

  // -------------------****** update **************

  let drawer;
  if (drawerOpen) {
    drawer = (
      <SideDrawer 
         close={closeDrawerHandler} 
         sidebar={{ StyledDrawer }} 

         // pass down here one of the wanted component : project1.js, 2 etc..
         project={
            <Project1
                selectedProject={selectedProject} // you can pass the selected 
                                                  // project as prop for 
                                                  // project1.js for example 
            />
         }
      />
    );
  }

  return (
    <StyledWorkNav>
                <ul>
                {projects.map((project) => (
                    <li
                        key={project.projId}
                        onClick={() => {
                            setSelectedProject(project);
                            openDrawerHandler();
                        }}>
                        <p data-text={project.dataText}>{project.name}</p>
                    </li>
                ))}
                {selectedProject && drawer}
            </ul>
    </StyledWorkNav>
  );
};

export default Work;

Answer 2

вы можете сделать что-то вроде этого: Upadate

imports ......

// this state will contain all your projects 
const [projects, setProjects] = useState([
       {
         id: 1,
         name: "project1"
       }, 
       {
         id: 2,
         name: "project2"
       },
       .....
])

// this will contain on of the project selected from the list of 
// projects
const [selectedProject, setSelectedProject] = useState({
      id: 1,
      name: "project1"
})

return (
<>
  <List>
     { projects.map(project => (
         <ListItem key={project.id} onClick={() => setSelectedProject(project)}>
            {project.name}
         </ListItem>
       ))
     }
  </List>

     {
       selectedProject && 
          <Sidebar // the selected project goes here and change every time a different project selected
            project={selectedProject}
          />
     }
</>
)

export ......