この記事をシェアする

こんにちは、ひねるです。

すいません、今回はエンタメといっさい関係ない記事ですが、実験として仕事上困ったこととその解決策をアップしたいと思います。

問題の起きる状況

  • Railsで定義したpartialファイル内で、react-railsgemのreact_componenthelperを呼び出している
  • 当該partialをRails的な作法で非同期に埋め込む(hoge.js.erb などで$(".hoge").append("<%= j(render 'hoges/hoges', hoges: @hoges) %>"); などとする)
  • 非同期で埋め込んだpartial内のreact componentがマウントされない

参考

reactjs/react-rails: Ruby gem for automatically transforming JSX and using React in Rails.

原因

Reactではdocument.ready時にpropsを受け取るか、stateが更新されたタイミングでしかreact componentのマウントが発生しないから？

状態に変更があればDocument全体を再描画するっていう思想を持つReact的に、従来の非同期通信でDOMが追加されたときのことを考える余地も必要もないって感じでしょうか？

対策

Documentに非同期でDOMを埋め込んだ際に、マウントを実行したいDOMを対象として、react_ujsのマウント処理を手動で実行する。

</p>
<h1>hoge.js.erb</h1>
<p>$(".hoge").append("<%= j(render 'hoges/hoges', hoges: @hoges) %>"); ReactRailsUJS.mountComponents('.hoges');

参考

react-rails/react_ujs.js.erb at b5859d457afd9fa732c324ed4f9f68ad313ddecb · reactjs/react-rails react-rails/show.html.erb at 73a9627b0c2b1ad3d6f5a15f1edf92c1710a608e · reactjs/react-rails

まとめ

Railsで作ったフロントエンドを徐々にReactに移行していくような段階でちょくちょく起きそうな事象なので、ちょろちょろ困る人が出てきそう。

gemやライブラリのソース読むのって大事ですね。5,6時間ネットで検索しても解決しなかったんですけど、ソース読んだら一瞬で解決したという。

この記事をシェアする