Как управлять открытием и закрытием <dialog> через проп open?

Как это работает

Проп open — это булево значение. Когда оно true, диалог отображается; когда false — скрыт. Однако просто установить атрибут open недостаточно для корректной работы модального окна: нужно также использовать методы show() или showModal() для открытия и close() для закрытия. В React это делается через рефы и эффекты.

Пример кода

import React, { useRef, useEffect } from 'react';

function Dialog({ open, onClose, children }) {
  const dialogRef = useRef(null);

  useEffect(() => {
    const dialog = dialogRef.current;
    if (open) {
      dialog.showModal(); // или show() для немодального
    } else {
      dialog.close();
    }
  }, [open]);

  return (
    <dialog ref={dialogRef} onClose={onClose}>
      {children}
      <button onClick={onClose}>Закрыть</button>
    </dialog>
  );
}

Применение

Такой подход используется для создания модальных окон, попапов или диалогов подтверждения. Проп open даёт родительскому компоненту полный контроль над видимостью, что упрощает управление состоянием.

Вывод: Используйте управление через проп open, когда нужно синхронизировать состояние диалога с внешними данными, например, при открытии по клику или после загрузки.