Reactでポップアップを実装する方法
Reactでポップアップを実装する方法を紹介します。
ここでは、Reactの状態管理を使ったシンプルなポップアップの例を示します。
1. 基本的なポップアップコンポーネント
まず、ポップアップコンポーネントを作成します。
import React from 'react'; type PopupProps = { message: string; onClose: () => void; }; const Popup: React.FC<PopupProps> = ({ message, onClose }) => { return ( <div className="popup"> <div className="popup-content"> <span className="close-btn" onClick={onClose}>×</span> <p>{message}</p> </div> </div> ); }; export default Popup;
2. ポップアップをトリガーする親コンポーネント
次に、ポップアップを表示・非表示にする親コンポーネントを作成します。
import React, { useState } from 'react'; import Popup from './Popup'; const App: React.FC = () => { const [isPopupOpen, setIsPopupOpen] = useState(false); const togglePopup = () => { setIsPopupOpen(!isPopupOpen); }; return ( <div className="App"> <button onClick={togglePopup}>ポップアップを表示</button> {isPopupOpen && <Popup message="これはポップアップメッセージです" onClose={togglePopup} />} </div> ); }; export default App;
このコードを使用すると、Reactアプリケーション内でシンプルなポップアップを表示することができます。
ポップアップはボタンをクリックすると表示され、閉じるボタンをクリックすると非表示になります。