찾다

 >  Q&A  >  본문

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

<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>
P粉832490510P粉832490510466일 전486

모든 응답(1)나는 대답할 것이다

  • P粉642920522

    P粉6429205222023-08-18 13:11:55

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

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

    으아악 으아악

    회신하다
    0
  • 취소회신하다