我如何製作具有不同描述的獨立模態框？

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