Javascript 使用JS手动装载/呈现React组件_Javascript_Ruby On Rails 4_Reactjs_Coffeescript_React Rails

Javascript 使用JS手动装载/呈现React组件

javascript ruby-on-rails-4 reactjs coffeescript

Javascript 使用JS手动装载/呈现React组件,javascript,ruby-on-rails-4,reactjs,coffeescript,react-rails,Javascript,Ruby On Rails 4,Reactjs,Coffeescript,React Rails,我正在尝试将react rails与kaminari gem一起使用。下面的一段代码负责创建带有分页的Admins页面，分页是一种kaminari方法： #app/views/dashboard/admins/_admins.html.erb <div id="admins_component"> <%= react_component 'Admins', {data: admins} %> </div> <%= paginate admins,

我正在尝试将react rails与kaminari gem一起使用。下面的一段代码负责创建带有分页的Admins页面，分页是一种kaminari方法：

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

#app/views/dashboard/admins/_admins.html.erb
正确%>

在使用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 %>

#app/views/dashboard/admins/index.js.erb
$（“#admin_wrapper”）.html（“”）；
React.render（“管理员”、“管理员组件”）//如何使这项工作？？？

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扩展在触发下一页请求后显示管理组件的先前状态：

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

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

react导轨

包括一些基于

数据反应类

和

数据反应道具

属性安装组件的辅助工具。gem使用这些助手来安装组件，您也可以自己调用它们

您应该删除此行：

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

并将其替换为：

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

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

您可以在这里的

react\u ujs*

文件中看到所有

react rails

的帮助程序：

react导轨