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

Question

我正在尝试将 react-rails 与 kaminari gem 一起使用。 下面的代码负责创建带有分页的管理员页面，分页是一个 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请求后，响应正确生成，ReactComponent也在页面的HTML中创建，如下：

<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_ujs* 文件中查看react-rails 的所有助手：

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