Comment puis-je créer des modaux séparés avec des descriptions différentes ?

Question

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.

Comment créer des modaux distincts avec des informations différentes ?

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 (

  Ouvrir la boîte modale
  
    
      
        Texte dans la zone modale
      
      
        Duis mollis, est non commodo luctus, nisi erat portitor ligula.
      
    ≪/Boîte>
  

); }
≪/pré>

Answer 1

Vous pouvez créer un composant plus générique pour le modal qui accepte les accessoires pour personnaliser le contenu de chaque voiture
Créez un accessoire appelé CarModal的新组件，接受carImage、carTitle和carDescription.

Vous pouvez désormais utiliser ce composant plusieurs fois à l'intérieur du composant Cars (celui où vous souhaitez afficher les voitures) pour créer des modaux séparés pour chaque voiture, il vous suffit de passer les accessoires appropriés pour une

// 导入 ...

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