React Portalsとは？
createPortal APIと、root divの外部にレンダリングする利点を理解します
「React Portalsとは？」はCoddyKit上の無料React Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。
ようこそ
通常のReact DOM階層
Portalとは
import { createPortal } from 'react-dom';
function Modal({ children }) {
return createPortal(
children,
document.body // render into body, not parent
);
}Portalが必要な理由
イベントのバブリングは引き続き機能する
Portalの描画先を作成する
// index.html
<body>
<div id="root"></div>
<div id="modal-root"></div>
</body>
// Modal.jsx
createPortal(children, document.getElementById('modal-root'));PortalのライフサイクルはReactの親に紐づく
Portalをまたいでもコンテキストは機能する
stateとcreatePortalを使う
function App() {
const [open, setOpen] = useState(false);
return (
<div>
<button onClick={() => setOpen(true)}>Open</button>
{open && createPortal(
<div className="overlay">
<button onClick={() => setOpen(false)}>Close</button>
</div>,
document.body
)}
</div>
);
}サーバーサイドレンダリングとPortal
確認問題
まとめ
次のレッスン
よくある質問
「React Portalsとは？」レッスンは無料ですか？
はい。「React Portalsとは？」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。
「React Portalsとは？」で何を学びますか？
createPortal APIと、root divの外部にレンダリングする利点を理解します ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「React Portalsとは？」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。