如何在 React Modal 上顯示組件

Question

我正在嘗試使用他的特定數據和道具單擊單個卡片時彈出一個模態框，但我真的不知道該怎么做。

我第一次用 Next.js 做所有這些，所以如果你看到任何其他錯誤，請告訴我。 我真的很想學習更多並提高。

這是我的/accidents路線 - accidents.js

export default function Home() {
    const router = useRouter()
    const [isOpen, setIsOpen] = useState(false)
    const [cardsArray, setCards] = useState([])

    const addCard = () => {
        let force = generateForce(100)
        let passagers = generatePassagers()
        let speed = generateSpeed()
        let msg = helpNeeded(force, passagers)

        let newCard = (
            <AccidentCard
                force={force}
                passagers={passagers}
                speed={speed}
                msg={msg}
            />
        )
        console.log(newCard)
        setCards((arr) => [...arr, newCard])
    }

    let cardsList = cardsArray.map((card, idx) => (
        <div key={idx} id={idx}>
            <Link
                href={`/accidents/?accidentNum=${idx}`}
                as={`/accidents/acc.num.${idx + 1}`}
            >
                <a>{card}</a>
            </Link>
        </div>
    ))  

    function toggleModal() {
        setIsOpen(!isOpen)
    }

    return (
        <div>
            <button onClick={addCard}>Add more</button>
            <div className={styles.cardsList} onClick={toggleModal}>{cardsList}</div>
            <Link href="/">
                <a>Go back to Home!</a>
            </Link>
            <ReactModal isOpen={isOpen} onRequestClose={toggleModal}>
                <div>Is MODAL OPEN IT WORKS</div>
                <button onClick={toggleModal}>X</button>
            </ReactModal>
        </div>
    )
}

這是卡片組件 - AccidentCard.js

const AccidentCard = (props) => {

    return (
        <div className={styles.cardContainer}>
            <p>Possible casualties: {props.passagers}</p>
            <p>Force is: {props.force} Joules</p>
            <p>Speed at impact: {props.speed} km/h</p>
            <p className={styles.help}>{props.msg}</p>
        </div>
    )
}

並且還有這個文件可以為每個事故打開一個單獨的頁面。 [accidentNum].js

export default function AccidentPage() {
  const router = useRouter()
  const {accidentNum} = router.query
 

  return <div>I'm the ACCIDENT {accidentNum}</div>
}

Answer 1

我對 CSS 使用內聯樣式，您可以更改它。 代碼沙盒鏈接

import { useState } from "react";

export default function IndexPage() {
  const [modalActive, setModalActive] = useState(false);
  return (
    <div>
      <button onClick={() => setModalActive(true)}>Open Card </button>

      {modalActive && (
        <ReactModal close={() => setModalActive(false)}>
          <div
            style={{
              width: 100,
              height: 100,
              backgroundColor: "white",
              padding: 20
            }}
          >
            Your Card Component is Here
          </div>
        </ReactModal>
      )}
    </div>
  );
}

function ReactModal({ children, close }) {
  return (
    <div
      style={{
        position: "fixed",
        top: 0,
        left: 0,
        background: "rgba(0, 0, 0, 0.5)",
        display: "flex",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center"
      }}
    >
      <div
        style={{
          width: "100vw",
          height: "100vh",
          position: "relative",
          display: "flex",
          flexDirection: "row",
          justifyContent: "center",
          alignItems: "center"
        }}
      >
        {children}
        <button
          onClick={close}
          style={{
            position: "absolute",
            top: 0,
            right: 0,
            marginRight: 10,
            marginTop: 10
          }}
        >
          Close Modal(Maybe put some close icon)
        </button>
      </div>
    </div>
  );
}

我希望它有所幫助。 祝你有美好的一天