React-Komponentenmontage mit Schienen: Vereinfachung dynamischer Schnittstellen

Moderne Anwendungen erfordern oft dynamische Schnittstellen, die API-Aufrufe, dynamische Formulare und Routing verarbeiten können, und React ist eine ausgezeichnete Wahl. Der Single-Page-Application-Ansatz (SPA) von React passt jedoch nicht ganz zu Ruby on Rails, einem Full-Stack-Framework, das Inhalte serverseitig rendert. Es ist zwar möglich, React mit Rails zu verwenden, indem man ein API-Backend einrichtet oder die Webpack-Integration verwendet, dies erhöht jedoch die Komplexität und die Entwicklungszeit erheblich.

Herausforderung

In Projekten wie Raive und Dunu506 benötigen wir dynamische Funktionen wie komplexe Assistenten, die eine Interaktion in Echtzeit erfordern. Das traditionelle serverseitige Rendering von Rails ist für diese Anwendungsfälle umständlich und die dynamische Natur von React passt perfekt.

Aber wie nutzt man React, ohne SPA vollständig zu übernehmen? Die Lösung ist einfach: Wir können React-Komponenten in Rails-Ansichten mounten, ohne den serverseitigen Rendering-Ansatz von Rails aufzugeben.

Lösung

React-Komponenten können an bestimmte Elemente in serverseitig gerenderten Ansichten angehängt werden. So fangen wir an:

Grundlegendes Mounten: In app/javascript/packs/application.js mounten wir eine einfache React-Komponente:

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

Wiederverwendbarkeit: Anschließend haben wir eine wiederverwendbare Funktion erstellt, um die Komponente dynamisch bereitzustellen:

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

Umgang mit mehreren Komponenten: Für Situationen, in denen dieselbe Komponente an mehreren Stellen wiederverwendet werden muss, haben wir die Methode verallgemeinert:

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

Konflikte vermeiden: Um Konflikte mit anderen CSS- oder JS-Klassen zu vermeiden, haben wir uns entschieden, ein benutzerdefiniertes Datenkomponentenattribut anstelle von id oder class zu verwenden:

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

Ergebnisse

Diese Lösung bietet eine saubere, wiederverwendbare Möglichkeit, React-Komponenten in Rails-Ansichten bereitzustellen. Dadurch können wir die dynamischen Funktionen von React nutzen und gleichzeitig die Einfachheit des serverseitigen Renderns von Rails beibehalten. Wir haben diesen Ansatz in eine Bibliothek gepackt, die in jedem Projekt verwendet werden kann, was Entwicklungszeit spart und unseren Arbeitsablauf optimiert.

Fazit

Durch die Verwendung des data-component-Attributs und die Erstellung einer einfachen Funktion zum dynamischen Mounten einer React-Komponente haben wir die Leistungsfähigkeit von React erfolgreich mit dem traditionellen serverseitigen Rendering-Ansatz von Rails kombiniert. Dieser Ansatz ist flexibel, wiederverwendbar und prägnant und daher eine gute Wahl für Teams, die dynamische Schnittstellen in Rails-Anwendungen benötigen.

Schauen Sie sich gerne unser GitHub-Repository an, um weitere Details zu erfahren und sich am Projekt zu beteiligen!

Das obige ist der detaillierte Inhalt vonReact-Komponentenmontage mit Schienen: Vereinfachung dynamischer Schnittstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!