Reactでダイアログを表示する方法

Reactでダイアログを表示する方法

Reactでダイアログを表示する方法について、TypeScriptを使用した例を紹介します。
ここでは、Reactの標準的な機能のみを使用して実装しますので、追加のライブラリは不要です。

import React, { useState } from 'react';

const DialogExample: React.FC = () => {
    const [isOpen, setIsOpen] = useState(false);

    const openDialog = () => {
        setIsOpen(true);
    };

    const closeDialog = () => {
        setIsOpen(false);
    };

    return (
        <div>
            <button onClick={openDialog}>ダイアログを開く</button>
            {isOpen && (
                <div>
                    <h2>ダイアログタイトル</h2>
                    <p>これはダイアログの内容です。</p>
                    <button onClick={closeDialog}>閉じる</button>
                </div>
            )}
        </div>
    );
};

export default DialogExample;

この例では、useStateフックを使用してダイアログの開閉状態を管理しています。
ボタンをクリックすると、ダイアログが表示され、閉じるボタンをクリックするとダイアログが閉じられます。