Wie kann ich separate Modalitäten mit unterschiedlichen Beschreibungen erstellen?

Question

Ich erstelle eine Autohändler-Website und wenn der Benutzer auf die Schaltfläche unter dem Bild des Autos klickt, möchte ich, dass im Modal nur Informationen zu diesem Auto angezeigt werden. Bisher habe ich erfolgreich mehrere modale Schaltflächen erstellt, aber alle zeigen die gleichen Informationen an.

Wie erstelle ich separate Modalitäten mit unterschiedlichen Informationen?

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


import * as React from 'react';
Box aus '@mui/material/Box' importieren;
Button aus '@mui/material/Button' importieren;
Typografie aus „@mui/material/Typography“ importieren;
Modal aus '@mui/material/Modal' importieren;

const style = {
  Position: 'absolut',
  oben: '50%',
  links: '50%',
  transform: 'übersetzen(-50%, -50%)',
  Breite: 400,
  bgcolor: 'background.paper',
  Rahmen: '2px solid #000',
  boxShadow: 24,
  S.: 4,
};

Standardfunktion BasicModal() exportieren
  const [open, setOpen] = React.useState(false);
  const handleOpen = () =>
  const handleClose = () => setOpen(false);

zurückkehren (
<div>
  <Button onClick={handleOpen}>Modalbox öffnen</Button>
  <Modal
    open={open}
    onClose={handleClose}
    aria-labelledby="modal-modal-title"
    aria-describedby="modal-modal-description"
  >
    <Box sx={style}>
      <Typografie-ID="modal-modal-title" Variante="h6" Komponente="h2">
        Text im modalen Feld
      </Typografie>
      <Typography id="modal-modal-description" sx={{ mt: 2 }}>
        Duis mollis, est non commodo luctus, nisi erat portitor ligula.
      </Typografie>
    </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>
  );
}