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組件

回答

相關問題