React with Rails 5.1 Appel d'objets de base de données dans des composants React

Question

Comment appeler un objet de base de données Rails 5.1 dans un composant React ?

Par exemple, dans une vue Rails standard, je peux appeler un objet à l'aide de @object en supposant que j'y ai accès dans le contrôleur.

Avec Rails 5.1, en utilisant la fonctionnalité React activée par Webpacker, comment puis-je appeler un objet de base de données Rails dans un composant React ?

Je veux faire un mapping de tous les @objets de ma base de données dans un composant React.

Avec la gemme react-rails, vous pouvez utiliser quelque chose comme ceci pour accéder à ces objets dans votre fichier jsx :

 <%= react_component('Component', props: @objects) %>

Comment puis-je faire quelque chose de similaire sans utiliser la gemme et en utilisant simplement la configuration de base Rails 5.1/Webpacker React ?

D'après ce que j'ai compris, il utilise une balise ruby comme ceci :

<%= javascript_pack_tag "Component" %>

Answer 1

Dans le modèle de vue où vous voulez rendre le composant React :

<%= javascript_pack_tag 'Component' %>

<%= content_tag :div,
  id: 'objects_data',
  data: @objects.to_json do %>
<% end %>

Cela rend cette balise html

<div id="objects_data" data="[{"id": 1, "created_at": .....}]"></div>

Ensuite, dans votre fichier JS

document.addEventListener('DOMContentLoaded', () => {
  var objectsDataTag = document.getElementById('objects_data')
  const objectsData = JSON.parse(objectsDataTag.getAttribute('data'))
})

Vous avez maintenant vos données JSON stockées dans le fichier objectsData constant.

Je crois savoir que c'est ainsi que <%= react_component('Component', props: @objects) %> fonctionne également.

Ce sujet est abordé de manière un peu plus détaillée dans le document intitulé webpacker docs et en cet article de blog