レールを使用した React コンポーネントの取り付け: 動的インターフェイスの簡素化

最新のアプリケーションでは、API 呼び出し、動的フォーム、ルーティングを処理できる動的インターフェースが必要になることが多く、React は優れた選択肢です。ただし、React のシングルページ アプリケーション (SPA) アプローチは、コンテンツをサーバー側でレンダリングするフルスタック フレームワークである Ruby on Rails とは完全には噛み合いません。 API バックエンドをセットアップするか、Webpack 統合を使用することで、Rails で React を使用することは可能ですが、これによりかなりの複雑さと開発時間が追加されます。

チャレンジ

Raive や Dunu506 のようなプロジェクトでは、リアルタイムの対話を必要とする複雑なウィザードのような動的な機能が必要です。 Rails の従来のサーバー側レンダリングは、このようなユースケースには扱いにくく、React の動的な性質が最適です。

しかし、SPA を完全に採用せずに、どうやって React を使用するのでしょうか?解決策は簡単です。Rails のサーバー側レンダリング アプローチを放棄することなく、Rails ビューに React コンポーネントをマウントできます。

解決策

React コンポーネントは、サーバー側でレンダリングされたビューの特定の要素にアタッチできます。始め方は次のとおりです:

基本的なマウント: app/javascript/packs/application.js で、単純な React コンポーネントをマウントします:

<code class="language-javascript">import React from 'react'
import ReactDOM from 'react-dom'
import Hello from './Hello'

document.addEventListener('DOMContentLoaded', () => {
  const div = document.querySelector('#hello')

  if (div) {
    const props = JSON.parse(div.getAttribute('data-props'))
    ReactDOM.render(<Hello />, div)
  }
})</code>

再利用性: 次に、コンポーネントを動的にマウントするための再利用可能な関数を作成しました。

<code class="language-javascript">import MyReactComponent from './MyReactComponent'

function mountComponent(id, Component) {
  document.addEventListener('DOMContentLoaded', () => {
    const div = document.querySelector(id)

    if (div) {
      const props = JSON.parse(div.getAttribute('data-props'))
      ReactDOM.render(<Component {...props} />, div)
    }
  })
}

mountComponent('#my-react-component', MyReactComponent)</code>

複数のコンポーネントの処理: 同じコンポーネントを複数の場所で再利用する必要がある状況に備えて、次の方法を一般化しました:

<code class="language-javascript">function mountComponent(selector, Component) {
  document.addEventListener('DOMContentLoaded', () => {
    const elements = document.querySelectorAll(selector)

    elements.forEach(element => {
      const props = JSON.parse(element.getAttribute('data-props'))
      ReactDOM.render(<Component {...props} />, element)
    })
  })
}</code>

競合の回避: 他の CSS クラスや JS クラスとの競合を避けるために、ID やクラスを使用する代わりにカスタム データコンポーネント属性を使用することにしました:

<code class="language-javascript">function mountComponents(components) {
  document.addEventListener('DOMContentLoaded', () => {
    const roots = document.querySelectorAll('[data-component]')

    Array.from(roots).forEach((root) => {
      const props = JSON.parse(root.dataset.props)
      const Component = components[root.dataset.component]

      ReactDOM.render(<Component {...props} />, root)
    })
  })
}

mountComponents({ MyReactComponent })</code>

結果

このソリューションは、Rails ビューに React コンポーネントをマウントするクリーンで再利用可能な方法を提供します。これにより、Rails のサーバー側レンダリングのシンプルさを維持しながら、React の動的機能を活用できるようになります。このアプローチをあらゆるプロジェクトで使用できるライブラリにパッケージ化し、開発時間を節約し、ワークフローを合理化しました。

結論

data-component 属性を使用し、React コンポーネントを動的にマウントする単純な関数を作成することで、React のパワーと Rails の従来のサーバー側レンダリング アプローチをうまく組み合わせることができました。このアプローチは柔軟性があり、再利用可能で、簡潔であるため、Rails アプリケーションで動的なインターフェイスを必要とするチームに適しています。

詳細については、お気軽に GitHub リポジトリをチェックし、プロジェクトに参加してください。

以上がレールを使用した React コンポーネントの取り付け: 動的インターフェイスの簡素化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。