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

中详细介绍了这一点

与Rails 5.1一起调用数据库对象到React组件

1 个答案: