ちゃんなるぶろぐ

エンジニア5年生🧑‍💻 オライリーとにらめっこする毎日。

【5分でわかる！】Reactで複数のDOM要素にレンダリングする

プログラミング React フロントエンド

どうも、ちゃんなるです！

今回はReactに関して書きます（ソースコード on Github）。

概要

React.jsの基本的なレンダリング

基本的にReactでは、下記のようなroot要素を起点にし、その子要素はReactコンポーネントで表現すると思います。

<div id="root" >
</div>

具体的には、起点にしたい単一のDOM要素をgetElementById()やquerySelector()等で取得し、それをReactDOM.createRoot()に渡してあげます。

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
)
root.render(
  /*<Reactコンポーネントを記述>*/
)

今回やりたいこと

ですが最近私は、例えば下記のような複数の隣接していないDOM要素を起点にしたいと思いました。 ＊該当箇所にはid="selected"を与えてます。

<div>
  <div id="selected" >
  </div>
  <div>
    ...
  </div>
  <div id="selected" >
  </div>
</div>

対象は例えばこんな画面です。Hereとなっている部分を対象のDOM要素とします。

https://raw.githubusercontent.com/naruwo-github/react-sandbox/main/rendering-in-multiple-places/asset/html.png

実現方法

起点としたい複数のDOM要素を取得し、それをReactDOM.createRoot()へ渡してあげればOKです👍

import ReactDOM from 'react-dom/client'

const domContents = document.querySelectorAll('#selected')

domContents.forEach(element => {
  const root = ReactDOM.createRoot(element)
  root.render(
    /*<Reactコンポーネントを記述>*/
  )
})

結果は例えばこのようになります。

https://raw.githubusercontent.com/naruwo-github/react-sandbox/main/rendering-in-multiple-places/asset/html-inserted-react.png

まとめと課題

複数の離れたDOM要素を起点にReactでレンダリングしたい場合、それら要素を取得してReactDOM.createRoot()へ渡してあげればOK！

ただ、今回はPropsやStateに関して触れてませんね👀 なので次回はPropsやStateを扱うことを考慮して複数のDOM要素にレンダリングする方法を紹介しようと思います！

環境

実装や動作確認の際に使ったツールたちです。
OS macOS Monterey Version 12.5
Node.js v18.6.0
create-react-app v5.0.1

＊対象のアプリはcreate-react-appを用いて作成しました。

関連資料