<p>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. </p> <p>Wie erstelle ich separate Modalitäten mit unterschiedlichen Informationen? </p> <pre class="brush:js;toolbar:false;">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> ); } </pre>

// 导入 ...

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