Pemasangan Komponen Bertindak balas dengan Rel: Memudahkan Antara Muka Dinamik

Aplikasi moden selalunya memerlukan antara muka dinamik yang boleh mengendalikan panggilan API, borang dinamik dan penghalaan, dan React ialah pilihan yang sangat baik. Walau bagaimanapun, pendekatan aplikasi satu halaman (SPA) React tidak begitu sepadan dengan Ruby on Rails, rangka kerja timbunan penuh yang menjadikan bahagian pelayan kandungan. Walaupun mungkin untuk menggunakan React with Rails dengan menyediakan bahagian belakang API atau menggunakan penyepaduan Webpack, ini menambahkan kerumitan dan masa pembangunan yang besar.

Cabaran

Dalam projek seperti Raive dan Dunu506, kami memerlukan ciri dinamik seperti ahli sihir kompleks yang memerlukan interaksi masa nyata. Perenderan sisi pelayan tradisional Rails adalah menyusahkan untuk kes penggunaan ini, dan sifat dinamik React sangat sesuai.

Tetapi bagaimana anda menggunakan React tanpa menggunakan SPA sepenuhnya? Penyelesaiannya mudah: kita boleh memasang komponen React dalam paparan Rails tanpa melepaskan pendekatan pemaparan bahagian pelayan Rails.

Penyelesaian

Komponen tindak balas boleh dilampirkan pada elemen tertentu dalam paparan yang diberikan sebelah pelayan. Begini cara kita bermula:

Pemasangan asas: Dalam app/javascript/packs/application.js, kami memasang komponen React yang mudah:

<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>

Kebolehgunaan semula: Kami kemudian mencipta fungsi boleh guna semula untuk melekapkan komponen secara dinamik:

<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>

Mengendalikan berbilang komponen: Untuk situasi di mana komponen yang sama perlu digunakan semula di berbilang tempat, kami umumkan kaedah:

<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>

Elakkan konflik: Untuk mengelakkan konflik dengan kelas CSS atau JS lain, kami memutuskan untuk menggunakan atribut komponen data tersuai dan bukannya menggunakan id atau kelas:

<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>

Keputusan

Penyelesaian ini menyediakan cara yang bersih dan boleh digunakan semula untuk memasang komponen React dalam paparan Rails. Ia membolehkan kami memanfaatkan keupayaan dinamik React sambil mengekalkan kesederhanaan pemaparan bahagian pelayan Rails. Kami membungkus pendekatan ini ke dalam perpustakaan yang boleh digunakan dalam mana-mana projek, menjimatkan masa pembangunan dan memperkemas aliran kerja kami.

Kesimpulan

Dengan menggunakan atribut komponen data dan mencipta fungsi mudah untuk memasang komponen React secara dinamik, kami berjaya menggabungkan kuasa React dengan pendekatan pemaparan sebelah pelayan tradisional Rails. Pendekatan ini fleksibel, boleh diguna semula dan ringkas, menjadikannya pilihan yang baik untuk pasukan yang memerlukan antara muka dinamik dalam aplikasi Rails.

Sila semak repositori GitHub kami untuk mendapatkan butiran lanjut dan untuk terlibat dalam projek!

Atas ialah kandungan terperinci Pemasangan Komponen Bertindak balas dengan Rel: Memudahkan Antara Muka Dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!