React with Rails 5.1 将数据库对象调用到 React 组件中

Question

如何将 Rails 5.1 数据库对象调用到 React 组件中？

例如，在标准 Rails 视图中，我可以使用 @object 调用对象，假设我可以访问在控制器中配置的对象。

在 Rails 5.1 中，使用启用了 Webpacker 的 React 功能，我如何将 Rails 数据库对象调用到 React 组件中？

我想在 React 组件中映射数据库中的所有 @objects。

使用 react-rails gem，您可以使用类似这样的方法来访问 jsx 文件中的这些对象：

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

如何在不使用 gem 并且仅使用基本 Rails 5.1/Webpacker React 设置的情况下做类似的事情？

我的理解是它使用这样的 ruby​​ 标签：

<%= javascript_pack_tag "Component" %>

Answer 1

在要渲染 React 组件的视图模板中：

<%= javascript_pack_tag 'Component' %>

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

这会渲染这个 html 标签

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

然后在你的 JS 文件中

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

现在您的 JSON 数据存储在 objectsData 常量中。

我的理解是<%= react_component('Component', props: @objects) %> 也是这样工作的。

这在webpacker docs 和this blog post 中有更详细的介绍