Reactの今まであまり触れてこなかった機能について試したことのまとめ

BRANK

react18.2で検証 createPortal以下はドキュメントの引用ポータル (portal) は、親コンポーネントの DOM 階層外にある DOM ノードに対して子コンポーネントをレンダーするための公式の仕組みを提供します。ポータルを使うと<div id="app">以下に書かれた<Modal>コンポーネントがDOM上では<div id="portal">以下にレンダリングされる。ただし、イベントは<div id="app">にバブリング(子要素で発生したイベントが親要素に伝搬)する。tsximport { FC, useState, ReactNode, useEffect } from "react"; import { createPortal } from "react-dom"; const Modal: FC<{ children: ReactNode }> = ({ children }) => { const target = document.querySelector("#portal"); return createPortal(children, target!); }; const Panrent = () => { const [prepared, setPrepared] = useState(false); useEffect(() => setPrepared(true), []); return ( <> <div id="portal" onClick={ // ChildのButtonをクリックしても呼ばれない () => console.log("in portal") } /> <div id="app" onClick={ // ChildのButtonをクリック…