설명이 다른 별도의 모달을 어떻게 만들 수 있나요?

Question

자동차 판매점 웹사이트를 만들고 있는데 사용자가 자동차 사진 아래에 있는 버튼을 클릭하면 모달이 해당 자동차에 대한 정보만 표시하도록 하고 싶습니다. 지금까지 여러 개의 모달 버튼을 성공적으로 만들었지만 모두 동일한 정보를 표시합니다.

정보가 다른 별도의 모달을 만들려면 어떻게 해야 합니까?

가져오기 "./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>
);

Answer 1

각 자동차의 콘텐츠를 사용자 정의하기 위해 소품을 허용하는 모달에 대한 보다 일반적인 구성 요소를 만들 수 있습니다
CarModal的新组件，接受carImage、carTitle和carDescription라는 소품을 만듭니다.

이제 Cars 구성 요소(자동차를 표시하려는 구성 요소) 내에서 이 구성 요소를 여러 번 사용하여 각 자동차에 대해 별도의 모달을 생성할 수 있습니다. 하나에 대해 적절한 소품을 전달하기만 하면 됩니다

으아악 으아악