时间戳

首页 > 解决方案 > 如何修改我的模态以便在 reactjs 中以不同的方式显示不同的项目？

reactjs - 如何修改我的模态以便在 reactjs 中以不同的方式显示不同的项目？

问题描述

下面是我的模态代码，我正在使用反应钩子。我想让我的“我们的团队”页面以模式显示每个成员的不同成员的详细信息。

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

标签： reactjs

解决方案

您可以有一个员工数组并将其映射到每个员工，例如，您可以使用如下结构并对其进行更改以满足您的需求：

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

然后制作一个通用的员工组件（例如一张卡片）

// 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>
);

推荐阅读