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

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

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

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

我想通过React组件中的数据库中的所有@objects进行映射。

随着反应护栏的宝石，你可以用这样的访问您的JSX文件的那些对象：

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

我如何做同样的事情，而无需使用宝石和只使用基本的Rails 5.1/Webpacker React设置？

我的理解是它采用的是红宝石标签是这样的：

<%= javascript_pack_tag "Component" %>

来源

2017-08-15 JohnOHFS

在视图模板要呈现的阵营组成：

<%= 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

来源

2017-08-15 14:01:14

谢谢！我会尝试的。 – JohnOHFS

@JohnOHFS我刚刚添加了一个更新，显示JSON解析应该包装在DOM加载事件侦听器中，并且还添加了一个链接到博客文章，帮助我为自己的项目弄明白。希望这可以帮助！ –

@ m-simon-borg现在，如果我将所有对象数据导入到一个视图中，比如使用对象控制器中的（at）objects = Object.all，如果我的rails数据库中有成千上万的对象条目，试图加载它们并放慢性能？有没有一种最佳实践方法来限制该html标签中的数据加载量？ – JohnOHFS

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

回答

相关问题