ReactでUI構造が変わっても状態を保持したい - React-Reverse-Portal -

こちらは「medicalforce New Year's Blog 2025」8日目の記事です。 今回はUI構造が変わっても状態を保持したいときに便利なReact-Reverse-Portalというライブラリを紹介しようと思います。 解決する課題 例えば、タブレット向けの画面実装で横向きのときは2-column型のレイアウトで表示して縦向きのときはタブを使ったレイアウトで表示したいということがあったとします。 Reactのコードで表現するとおおよそ以下のような実装になるかと思います。 export default Page = () => { // 中略 return isLandscape ? ( <Grid cols={2}> <GridItem> <Content1 /> </GridItem> <GridItem> <Content2 /> </GridItem> </Grid>

[shingo-sasaki-0529]

なるほど。実態はポータルで描画しっぱなしで、レイアウトに応じてポータルのコンテンツを複製することで状態を維持するのか。