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 ( Teks dalam kotak modal Duis mollis, est non commodo luctus, nisi erat portitor ligula. );
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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 ( {carTitle} {carDescription} 
); }export default function Cars() { // 导入 carModal // ... return ( ); }