1

我正在尝试将 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 时,我得到以下输出: 在此处输入图像描述

4

1 回答 1

4

react-rails包括一些基于data-react-classdata-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

于 2016-03-16T20:43:21.930 回答