使用JS手动装载/渲染React组件

Question

我正在尝试将反应轨道与kaminari宝石一起使用。 下面的代码负责创建带分页的Admins页面，paginate是kaminari方法：

#app/views/dashboard/admins/_admins.html.erb
<div id="admins_component">
  <%= react_component 'Admins', {data: admins} %>
</div>
<%= paginate admins, :remote => true %>

在使用remote = true的触发请求时，重新绘制了整个内容，通过以下代码生成响应：

#app/views/dashboard/admins/index.js.erb
<% if @admins.present? %>
$("#admin_wrapper").html("<%= escape_javascript(render partial: 'admins', locals: { admins: @admins } ) %>");
React.render("Admins", "#admins_component"); //How to make this work???
<% end %>

在ajax请求之后，正确生成了响应，并且还在页面的HTML中创建了ReactComponent，如下所示：

<div data-react-class="Admins" data-react-props="{"data":[{"id":26,"email":"okokoko@kok.com","created_at":"2016-03-16T09:10:48.220Z","updated_at":"2016-03-16T09:10:48.220Z"}]}"></div>

但问题是组件未呈现/装载。我尝试通过控制台手动安装组件，但我不确定我是否正确操作。

此外，在触发下一页的请求后，chrome中的react扩展显示Admin组件的先前状态：

目标是在点击分页链接时替换下面红框的html：

当我在单击分页链接之前/之后在控制台中运行Admin.prototype时，我得到以下输出：

Answer 1

react-rails包含一些基于data-react-class和data-react-props属性安装组件的帮助程序。 gem使用这些帮助程序来安装组件，您也可以自己调用它们。

你应该删除这一行：

React.render("Admins", "#admins_component"); //How to make this work???

并将其替换为：

// Find any divs with `data-react-class` and mount them 
ReactRailsUJS.mountComponents()

可以随时调用该功能。即使已经安装了一个组件，它也会重新渲染它，但不会弄乱任何东西！

您可以在react-rails文件中查看所有react_ujs*个助手：

https://github.com/reactjs/react-rails/tree/master/lib/assets/javascripts