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 and in this blog post

中有更详细的介绍

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

React with Rails 5.1 Calling Database Objects into React Components

components

ruby-on-rails

reactjs

ruby-on-rails-5.1