現代應用通常需要能夠處理 API 呼叫、動態表單和路由的動態介面，而 React 是一個絕佳的選擇。然而，React 的單頁應用程式 (SPA) 方法與 Ruby on Rails（一個全端框架，在伺服器端渲染內容）並不完全契合。雖然可以透過設定 API 後端或使用 Webpack 整合來在 Rails 中使用 React，但這會增加相當大的複雜性和開發時間。
挑戰
在 Raive 和 Dunu506 等專案中，我們需要諸如需要即時互動的複雜嚮導之類的動態功能。 Rails 傳統的伺服器端渲染對於這些用例來說很繁瑣，而 React 的動態特性非常適合。
但是，如何在不完全採用 SPA 的情況下使用 React 呢？解決方案很簡單：我們可以在 Rails 視圖中掛載 React 元件，而無需放棄 Rails 的伺服器端渲染方法。
解決方案
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 類別發生衝突，我們決定使用自訂的 data-component 屬性，而不是使用 id 或 class：
<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 元件。它使我們能夠利用 React 的動態功能，同時保持 Rails 伺服器端渲染的簡潔性。我們將此方法打包到一個庫中，可用於任何項目，從而節省開發時間並簡化我們的工作流程。
結論
透過使用 data-component 屬性並建立一個簡單的函數來動態掛載 React 元件，我們成功地將 React 的強大功能與 Rails 的傳統伺服器端渲染方法結合。這種方法靈活、可重複使用且簡潔，對於需要在 Rails 應用中使用動態介面的團隊來說，這是一個不錯的選擇。
歡迎查看我們的 GitHub 儲存庫以了解更多詳細資訊並參與此專案！
以上是使用 Rails 安裝 React 元件：簡化動態接口的詳細內容。更多資訊請關注PHP中文網其他相關文章！
