html "dialog"를 사용하는 간단한 React 모달

나는보고 싶었다:

React로 새 html "dialog"요소를 어떻게 구현합니까?

프로그래밍 방식의 자바스크립트 호출 없이 완전히 선언적으로 가능합니까?

그리고 React와 div를 사용하는 일반적인 선언적 구현보다 낫습니까?

w3schools.com에 따르면 "dialog"요소를 사용하면 웹 페이지에서 팝업 대화 상자와 모달을 쉽게 만들 수 있습니다.

지원: Firefox, Chrome, Edge 및 Safari 15.4(2022년 3월 14일 현재).

구현 스크린샷:



메모:

"Modal"구성 요소는 일반적이며 상위 컨테이너의 콘텐츠를 표시합니다.

onCancel은 Escape를 누른 경우 상태 변수 "open"을 재설정하는 데 필요합니다.

"사용자 선택"이 없으면 어떤 이유로 배경을 클릭하면 모달의 텍스트가 선택됩니다.

두 가지 구성 요소를 만들었습니다.

먼저 "ModalTester"구성 요소는 모달을 포함하고 엽니다.

import { useState } from "react";

import { Modal } from "components";

const ModalTester = () => {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <div>open: {open ? "true" : "false"}</div>
      <br />

      <button onClick={() => setOpen(true)}>Open dialog</button>

      <Modal
        title="Modal dialog example"
        open={open}
        onClose={() => setOpen(false)}
      >
        <p>Outside the dialog is not clickable.</p>

        <p>You can click Close, or press Escape.</p>
      </Modal>
    </div>
  );
};

export default ModalTester;

그런 다음 "Modal"구성 요소 자체:

import { useEffect, useRef } from "react";
import styled from "styled-components";

const Container = styled.dialog`
  width: 400px;
  border-radius: 8px;
  border: 1px solid #888;

  ::backdrop {
    background: rgba(0, 0, 0, 0.25);
    user-select: none;
  }
`;

type Props = {
  title: string;
  open: boolean;
  onClose: () => void;
  children: React.ReactNode;
};

const Modal = ({ title, open, onClose, children }: Props) => {
  const ref = useRef(null);

  useEffect(() => {
    if (open) {
      ref.current?.showModal();
    } else {
      ref.current?.close();
    }
  }, [open]);

  return (
    <Container ref={ref} onCancel={onClose}>
      <h3>{title}</h3>

      {children}

      <button onClick={onClose}>Close</button>
    </Container>
  );
};

export default Modal;

내 결론:

프로그래밍 방식의 자바스크립트 호출 없이 완전히 선언적으로 가능합니까? 아니요, 안타깝게도 배경이 있는 모달 대화 상자를 원하면 useRef 및 프로그래밍 방식 자바스크립트 호출이 필요합니다.

React 및 div를 사용하는 일반적인 선언적 구현보다 낫습니까? 예, 프로그래밍 방식의 자바 스크립트 호출이 필요하기 때문에 React에서는 여전히 간단하지 않지만 이것은 더 간단하고 짧아 보입니다.

제한 사항/문제:

양식은 자바스크립트 없이는 불가능합니다.

(모달을 닫기 위해) 배경에서 클릭을 감지하는 간단하고 간단한 방법이 없으므로 배경이 응답하지 않는 상태로 유지되어야 합니다.

배경을 클릭하면 어떤 이유로 모든 모달 콘텐츠가 선택됩니다.

읽어 주셔서 감사합니다. 제안/수정을 환영합니다.