Bagaimanakah saya boleh membuat modal berasingan dengan penerangan yang berbeza?

Question

Saya sedang membuat tapak web pengedar kereta dan apabila pengguna mengklik butang di bawah gambar kereta, saya mahu modal memaparkan maklumat tentang kereta itu sahaja. Setakat ini saya telah berjaya mencipta beberapa butang modal, tetapi semuanya memaparkan maklumat yang sama.

Bagaimanakah cara saya mencipta modal berasingan dengan maklumat berbeza?

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


import * sebagai React daripada 'react';
import Box daripada '@mui/material/Box';
import Butang daripada '@mui/material/Button';
import Tipografi daripada '@mui/bahan/Tipografi';
import Modal daripada '@mui/material/Modal';

gaya const = {
  kedudukan: 'mutlak',
  atas: '50%',
  kiri: '50%',
  ubah: 'terjemah(-50%, -50%)',
  lebar: 400,
  bgcolor: 'background.paper',
  sempadan: '2px pepejal #000',
  boxshadow: 24,
  hlm: 4,
};

eksport fungsi lalai BasicModal() {
  const [open, setOpen] = React.useState(false);
  const handleBuka = ​​() =>
  const handleClose = () =>

kembali (

  Buka kotak modal
  
    
      
        Teks dalam kotak modal
      
      
        Duis mollis, est non commodo luctus, nisi erat portitor ligula.
      
    
  

);

Answer 1

Anda boleh mencipta komponen yang lebih generik untuk modal yang menerima prop untuk menyesuaikan kandungan setiap kereta
Buat prop yang dipanggil CarModal的新组件，接受carImage、carTitle和carDescription.

Kini anda boleh menggunakan komponen ini beberapa kali di dalam komponen Cars (yang mana anda ingin memaparkan kereta) untuk mencipta mod berasingan bagi setiap kereta, anda hanya perlu melepasi prop yang sesuai untuk satu

// 导入 ...

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