Closed lef237 closed 1 year ago
補足:名前に重複があると、次のようなwarning
メッセージが出る。(マウントの文字列にhogeとhogefugaがあって、hoge
が被っている場合など)
application-fa69c02.js:3003 Warning: You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it.
以前の状態では、必ずdivのidが
hoge1
から始まる連番になっている必要があり、Viewファイルを書くのが大変だった。しかし、このPull Requestにより、
div
のIDの文字列が被っていなければ表示されるようになったので、一つのViewファイルで複数のReactコンポーネントを簡単に表示できるようになった。具体的には、
kaminari
のようなgemを使うと、例えば1ページ目の表示数が10
だとすると、.each.with_index(1)
を使ったとしても、2ページ目のdivのidがhoge11
から始まってしまい、そのページでは1
からのスタートでは無くなってしまうため、Reactが表示されなくなってしまう恐れがあった。今回の改善により、仮に
hoge11
から始まったとしても、問題なく表示されるようになった。重複が無く、なおかつエンドポイント側で指定された文字列が入っていればOKだからである。※一点だけ注意点がある。
エンドポイントがこうなっていたとき、
hogefuga
というidがあると、後者のHogefuga
が使われる。 (順番を逆にすると、Hoge
のほうが使われてしまう)そのため、
hogefuga
の中にhoge
やfuga
が使われている場合には、先にhoge
やfuga
を含むコンポーネントを書いてあげよう。OKな例
頭の中で(ベン図のような)数学的な集合をイメージすれば、これなら問題ないと分かるはずである。 なぜなら、
hogefuga
を満たすためには、必要十分条件を満たす必要があるからだ。NGな例
この場合、
hogefuga
はFuga
でマウントされてしまう。