Блог

Ниже приведен мой код для модала, я использую хуки react. Я хочу, чтобы на моей странице «Наша команда» сведения о разных участниках отображались в модальном режиме для каждого участника.

 <Modal
  aria-labelledby="transition-modal-title"
  aria-describedby="transition-modal-description"
  className={classes.modal}
  open={open}
  onClose={handleClose}
  closeAfterTransition
  BackdropComponent={Backdrop}
  BackdropProps={{
    timeout: 500,
  }}>
  <Fade in={open}>
    <div className={classes.paper}>
      <CloseIcon onClick={handleClose} style={{ float: 'right'}}/>
      <img src={tImg} style={{margin: '20px 0 0 0'}}/>
      <h2 id="transition-modal-title">Transition modal</h2>
      <p id="transition-modal-description">react-transition-group animates me.</p>
    </div>
  </Fade>
</Modal>
  

У вас мог бы быть массив employees и он был бы сопоставлен каждому employee, например, вы могли бы использовать структуру, подобную приведенной ниже, и изменить ее в соответствии с вашими потребностями:

 // File: data/employee-data.js
[
  {
    "name": "Bob",
    "about": "My name is Bob, I am an employee at fooCompany"
  },
  {
    "name": "Rob",
    "about": "My name is Rob, I am an employee at fooCompany"
  },
  {
    "name": "Tim",
    "about": "My name is Tim, I am an employee at fooCompany"
  }
]
  

Затем вы могли бы использовать этот компонент для его переноса

 // File: components/Employees/Employees.jsx

import React, { useState } from "react";

import Employee from "./Employee/Employee";
import employeeData from "../data/employee-data.json";

export default () => {
  const [employees, setEmployees] = useState([...employeeData]);
  
  return employees.map(employee => (
    <Employee employee={employee} />
  ))
}
  

А затем создайте общий компонент employee (например, card)

 // File: components/Employees/Employee/Employee.jsx

import React from "react";

export default ({employee}) => {
  const [modalOpen, setModalOpen] = useState(false);
  
  const closeModal = () => setModalOpen(false);
  const openModal = () => setModalOpen(true);

  // return some nice employee component with some information and click action
  return (
    <>
      <div>
        <h1>{employee.name}</h1>
        <p onClick={openModal}>Click here to read more about me</p>
      </div>
      <EmployeeModal
        employee={employee}
        open={modalOpen}
        closeModal={closeModal}
        openModal={openModal}
      />  
    </>
  );
}
  

И затем вы используете свой модальный

 // File: components/Employees/Employee/EmployeeModal/EmployeeModal.jsx

import React from "react";
// your modal imports
// your react-transition imports
// your style imports and other imports

export default ({ employee, open, closeModal, openModal }) => (
  <Modal
    aria-labelledby="transition-modal-title"
    aria-describedby="transition-modal-description"
    className={classes.modal}
    open={open}
    onClose={handleClose}
    closeAfterTransition
    BackdropComponent={Backdrop}
    BackdropProps={{
    timeout: 500,
  }}>
    <Fade in={open}>
      <div className={classes.paper}>
        <CloseIcon onClick={handleClose} style={{ float: 'right'}}/>
        <img src={tImg} style={{margin: '20px 0 0 0'}}/>
        <h2 id="transition-modal-title">{employee.name}</h2>
        <p id="transition-modal-description">{employee.about}</p>
      </div>
    </Fade>
  </Modal>
);