Transfert de propriétés à un composant React Webpacker dans Rails 5.1

Question

Comment passer des props ou des données au composant lors de l'utilisation de la balise javascript_pack_tag?

actuellement

/application.html.erb
<%= javascript_pack_tag 'flash_messages', data: {messages: flash_messages} %>

Answer 1

Il pourrait être fait de plusieurs manières.

1. vous pourriez passer les props "à la main"

document.addEventListener('DOMContentLoaded', () => {
  const node = document.getElementById('flash_messages_data')
  const data = JSON.parse(node.getAttribute('data'))
   ReactDOM.render(
     ,
     document.body.appendChild(document.createElement('div')),
   )
  })

Ou vous pourriez utiliser un gem, qui fait essentiellement presque la même chose : https://github.com/renchap/webpacker-react

dans votre vue

<%= react_component('FlashMessages', { messages: [] }) %>
<%= javascript_pack_tag 'components/flash_messages' %>

et dans votre composant

import React, { Component } from 'react'
import WebpackerReact from 'webpacker-react'

class FlashMessages extends Component {
  ...
  render() {}
}

WebpackerReact.setup({FlashMessages}) // ES6 raccourci pour {Hello: Hello}

la dernière ligne analyse essentiellement l'attribut de données généré par le react_component helper, et le transmet à votre composant.