我如何制作具有不同描述的独立模态框？

Question

我正在制作一个汽车经销商网站，当用户点击汽车图片下方的按钮时，我希望模态框只显示关于该汽车的信息。目前我已经成功创建了多个模态框按钮，但是它们都显示相同的信息。

我该如何创建具有不同信息的独立模态框？

import "./Modal.css";
import Pagani from '../Images/pagani2.jpg';
import Pagani1 from '../Images/pagani.jpg';
import p1 from '../Images/p1.jpg';
import r342 from '../Images/r342.jpg';


import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Modal from '@mui/material/Modal';

const style = {
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: 400,
  bgcolor: 'background.paper',
  border: '2px solid #000',
  boxShadow: 24,
  p: 4,
};

export default function BasicModal() {
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

return (
<div>
  <Button onClick={handleOpen}>打开模态框</Button>
  <Modal
    open={open}
    onClose={handleClose}
    aria-labelledby="modal-modal-title"
    aria-describedby="modal-modal-description"
  >
    <Box sx={style}>
      <Typography id="modal-modal-title" variant="h6" component="h2">
        模态框中的文本
      </Typography>
      <Typography id="modal-modal-description" sx={{ mt: 2 }}>
        Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
      </Typography>
    </Box>
  </Modal>
</div>
); }

Answer 1

你可以为模态框创建一个更通用的组件，接受props来自定义每辆汽车的内容
创建一个名为CarModal的新组件，接受carImage、carTitle和carDescription作为props。

现在你可以在Cars组件中多次使用这个组件（你想要显示汽车的组件）来为每辆汽车创建单独的模态框，你只需要为一个传递适当的props

// 导入 ...

const style = {
  // ...
};

function CarModal({ carImage, carTitle, carDescription }) {
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  return (
    <div>
      <Button onClick={handleOpen}>打开模态框</Button>
      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box sx={style}>
          <Typography id="modal-modal-title" variant="h6" component="h2">
            {carTitle}
          </Typography>
          <Typography id="modal-modal-description" sx={{ mt: 2 }}>
            {carDescription}
          </Typography>
          <img src={carImage} alt={carTitle} />
        </Box>
      </Modal>
    </div>
  );
}

export default function Cars() {

  // 导入 carModal
  // ...

  return (
    <div>
      <CarModal
        carImage={Pagani}
        carTitle="Pagani汽车"
        carDescription="这是Pagani汽车的描述。"
      />
      <CarModal
        carImage={Pagani1}
        carTitle="另一辆Pagani汽车"
        carDescription="这是另一辆Pagani汽车的描述。"
      />
      // ...
    </div>
  );
}