설명이 다른 별도의 모달을 어떻게 만들 수 있나요?
<p>자동차 판매점 웹사이트를 만들고 있는데 사용자가 자동차 사진 아래에 있는 버튼을 클릭하면 모달이 해당 자동차에 대한 정보만 표시하도록 하고 싶습니다. 지금까지 여러 개의 모달 버튼을 성공적으로 만들었지만 모두 동일한 정보를 표시합니다. </p>
<p>정보가 다른 별도의 모달을 만들려면 어떻게 해야 합니까? </p>
<pre class="brush:js;toolbar:false;">가져오기 "./Modal.css";
'../Images/pagani2.jpg'에서 Pagani를 가져옵니다.
'../Images/pagani.jpg'에서 Pagani1을 가져옵니다.
'../Images/p1.jpg'에서 p1을 가져옵니다.
'../Images/r342.jpg'에서 r342를 가져옵니다.
import *를 'react'에서 React로 가져옵니다.
'@mui/material/Box'에서 상자를 가져옵니다.
'@mui/material/Button'에서 버튼 가져오기;
'@mui/material/Typography'에서 타이포그래피를 가져옵니다.
'@mui/material/Modal'에서 모달을 가져옵니다.
const 스타일 = {
위치: '절대',
상단: '50%',
왼쪽: '50%',
변환: '번역(-50%, -50%)',
폭: 400,
bgcolor: '배경.종이',
테두리: '2px 솔리드 #000',
상자그림자: 24,
피: 4,
};
기본 함수 내보내기 BasicModal() {
const [open, setOpen] = React.useState(false);
const handlerOpen = () =>
const handlerClose = () =>
반품 (
<div>
<Button onClick={handleOpen}>모달 상자 열기</Button>
<모달
열다={열다}
onClose={handleClose}
aria-labelledby="모달-모달-제목"
aria-describedby="모달-모달-설명"
>
<박스 sx={스타일}>
<타이포그래피 id="modal-modal-title" 변형="h6" 구성요소="h2">
모달 상자의 텍스트
</타이포그래피>
<Typography id="modal-modal-description" sx={{ mt: 2 }}>
Duis mollis, est non commodo luctus, nisi erat portitor ligula.
</타이포그래피>
</박스>
</모달>
</div>
);
</pre>