Portalsでモーダルコンポーネントを構築する
createPortalを使い、document.bodyにレンダリングする再利用可能なモーダルを作成します
「Portalsでモーダルコンポーネントを構築する」はCoddyKit上の無料React Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。
ようこそ
Modalコンポーネントの基本構造
function Modal({ isOpen, onClose, children }) {
if (!isOpen) return null;
return createPortal(
<div className="backdrop" onClick={onClose}>
<div className="modal" onClick={e => e.stopPropagation()}>
{children}
</div>
</div>,
document.body
);
}背景とイベント伝播の停止
Escapeキーで閉じる
useEffect(() => {
if (!isOpen) return;
const handle = (e) => { if (e.key === 'Escape') onClose(); };
document.addEventListener('keydown', handle);
return () => document.removeEventListener('keydown', handle);
}, [isOpen, onClose]);bodyのスクロールを防止する
useEffect(() => {
if (isOpen) {
document.body.style.overflow = 'hidden';
}
return () => { document.body.style.overflow = ''; };
}, [isOpen]);モーダルの基本CSS
.backdrop {
position: fixed; inset: 0;
background: rgba(0,0,0,0.5);
display: flex; align-items: center; justify-content: center;
z-index: 1000;
}
.modal {
background: white;
border-radius: 8px;
padding: 24px;
min-width: 320px;
}モーダルを使う
function App() {
const [open, setOpen] = useState(false);
return (
<>
<button onClick={() => setOpen(true)}>Open Modal</button>
<Modal isOpen={open} onClose={() => setOpen(false)}>
<h2>Hello from the modal!</h2>
<button onClick={() => setOpen(false)}>Close</button>
</Modal>
</>
);
}内部に閉じるボタンを追加する
CSSトランジションによるアニメーション
// Toggle class based on isOpen
<div className={`backdrop ${isOpen ? 'visible' : 'hidden'}`}>モーダルのヘッダーとフッターを組み合わせる
確認問題
まとめ
次のレッスン
よくある質問
「Portalsでモーダルコンポーネントを構築する」レッスンは無料ですか？
はい。「Portalsでモーダルコンポーネントを構築する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。
「Portalsでモーダルコンポーネントを構築する」で何を学びますか？
createPortalを使い、document.bodyにレンダリングする再利用可能なモーダルを作成します ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「Portalsでモーダルコンポーネントを構築する」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- React Portalsとは？
- Portalsでモーダルコンポーネントを構築する
- モーダルのフォーカスとキーボードトラップを扱う
- Portalsでツールチップとドロップダウンメニューを作る