使用 Rails 安装 React 组件：简化动态接口

现代应用通常需要能够处理 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中文网其他相关文章！