Mount/Render 手动使用 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请求后，正确生成了响应，并且在页面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>

但问题是组件不是rendered/mounted。我尝试通过控制台手动安装组件，但我不确定我是否正确地安装了它。

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

目的是在点击分页时替换下面红框的html:

当我运行 Admin.prototype 在控制台 before/after 单击分页 link 时，我得到以下输出：

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

Mount/Render 手动使用 JS 的 React 组件

Mount/Render a React component manually using JS

javascript

coffeescript

ruby-on-rails-4

reactjs

react-rails