我如何制作具有不同描述的独立模态框？-PHP中文网问答

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

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

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

// 导入 ... 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> ); }