从 Rails 控制器传递数据到反应组件答案

【问题标题】：Passing data from rails controller to react component从 Rails 控制器传递数据到反应组件
【发布时间】：2018-01-24 21:56:55
【问题描述】：

我正在尝试通过 webpacker 将 rails 与 react 集成，但我不知道如何从控制器传递示例 @post = Post.all 以响应组件道具。我必须通过api来做到这一点还是有其他方式？

【问题讨论】：

是的，根据pluralsight.com/guides/ruby-ruby-on-rails/…，您需要创建一个从 React 前端访问的 api。
您需要通过 API 来完成，因此您必须运行两台服务器。
虽然您确实需要通过 API 来完成，但您绝对可以使用单个服务器来完成。如果您希望分离关注点，这不是一个坏主意，但也没有必要。
如果 react 只是 MVC 结构的 V，那么不应该有一种将数据传递给组件的方法，比如传递给 erb？

标签： javascript ruby-on-rails node.js ruby reactjs

【解决方案1】：

这是另一种方式：

some_views.html.erb

<%= javascript_tag do %>
  var appointments = <%= raw(@appointments.to_json) %>
<% end %>

some_react_components.js

document.addEventListener('DOMContentLoaded', () => {
  const data = window.appointments
  ReactDOM.render(
    <Appointments appointments={data} />,
    document.body.appendChild(document.createElement('div')),
  )
})

【讨论】：

【解决方案2】：

我自己找到解决方案。 https://hackernoon.com/how-to-get-your-rails-data-into-your-react-component-with-webpacker-647dc63706c9

通过添加内容标签来查看我想要渲染反应组件的位置并将道具作为属性传递。

<%= content_tag :div,
  id: "appointments_data",
  data: @appointments.to_json do %>
<% end %>

然后解析数据并添加它做道具

document.addEventListener('DOMContentLoaded', () => {
  const node = document.getElementById('appointments_data')
  const data = JSON.parse(node.getAttribute('data'))
  ReactDOM.render(
    <Appointments appointments={data} />,
    document.body.appendChild(document.createElement('div')),
  )
})

【讨论】：