<p>Je crée un site Web de concessionnaire automobile et lorsque l'utilisateur clique sur le bouton sous l'image de la voiture, je souhaite que le modal affiche uniquement les informations sur cette voiture. Jusqu'à présent, j'ai réussi à créer plusieurs boutons modaux, mais ils affichent tous les mêmes informations. </p> <p>Comment créer des modaux distincts avec des informations différentes ? </p> <pre class="brush:js;toolbar:false;">import "./Modal.css"; importer Pagani depuis '../Images/pagani2.jpg'; importer Pagani1 depuis '../Images/pagani.jpg'; importer p1 depuis '../Images/p1.jpg' ; importer r342 depuis '../Images/r342.jpg' ; importer * en tant que React depuis 'react' ; importer la boîte depuis '@mui/material/Box' ; importer le bouton depuis '@mui/material/Button' ; importer la typographie depuis '@mui/material/Typography' ; importer du modal depuis '@mui/material/Modal' ; style const = { position : 'absolue', en haut : '50%', à gauche : '50%', transformer : 'traduire(-50%, -50%)', largeur : 400, bgcolor : 'background.paper', bordure : '2px solide #000', boxShadow : 24, p : 4, } ; exporter la fonction par défaut BasicModal() { const [open, setOpen] = React.useState(false); const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); retour ( <div> <Button onClick={handleOpen}>Ouvrir la boîte modale</Button> <Modal ouvert={ouvert} onClose={handleClose} aria-labelledby="modal-modal-titre" aria-describeby="modal-modal-description" > <Boîte sx={style}> <Typographie id="modal-modal-title" variant="h6" composant="h2"> Texte dans la zone modale </Typographie> <Typographie id="modal-modal-description" sx={{ mt: 2 }}> Duis mollis, est non commodo luctus, nisi erat portitor ligula. </Typographie> ≪/Boîte> </Modal> </div> ); } ≪/pré>

// 导入 ...

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