Question

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

Answer 1

我自己找到解决方案。 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')),
  )
})

Answer 2

这是另一种方式：

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')),
  )
})

将数据从rails控制器传递到反应组件

2 个答案: