我正在製作一個汽車經銷商網站，當使用者點擊汽車圖片下方的按鈕時，我希望模態框只顯示關於該汽車的資訊。目前我已經成功建立了多個模態框按鈕，但是它們都顯示相同的資訊。
我該如何建立具有不同資訊的獨立模態框？
import "./Modal.css"; import Pagani from '../Images/pagani2.jpg'; import Pagani1 from '../Images/pagani.jpg'; import p1 from '../Images/p1.jpg'; import r342 from '../Images/r342.jpg'; import * as React from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Typography from '@mui/material/Typography'; import Modal from '@mui/material/Modal'; const style = { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: 400, bgcolor: 'background.paper', border: '2px solid #000', boxShadow: 24, p: 4, }; export default function BasicModal() { const [open, setOpen] = React.useState(false); const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); return ( 模態框中的文字 Duis mollis, est non commodo luctus, nisi erat porttitor ligula. ); }
你可以為模態框建立一個更通用的元件，接受props來自訂每輛車的內容
建立一個名為
CarModal的新元件，接受carImage、carTitle和carDescription為props。現在你可以在
Cars組件中多次使用這個組件（你想要顯示汽車的組件）來為每輛汽車創建單獨的模態框，你只需要為一個傳遞適當的props// 导入 ... 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 ( ); }