使用反应轨道的多个未捕获错误宝石

Question

为了引导我的问题，我遵循this指南。

当尝试使用Rails建立一个CRUD接口和反应，我收到this错误试图创建一个新的项目时：

addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded.

我不恰当地添加ref属性，任何JSX不是内部一个render方法，所以我必须在我的资产管道中有多个React副本。

研究产生了以下可能的结果：

1. 介绍webpack或Searchkit，在this建议SO回答，似乎是我的简单的CRUD接口笨重的解决方法。
2. This未选择SO答案建议从./app/assets/javascripts/application.js删除//= require react行。这被证明是不成功的。
3. 问题＃671，从官方的GitHub react-rails回购。 here，完美地概述了我的问题的第一部分。我遵循这个潜在的解决方案，这表明删除./app/assets/javascripts/server_rendering.js文件的//= require react-server行。这导致了一个新的错误，概述如下：

Uncaught ReferenceError: $ is not defined

我假设意味着react_server不仅包含阵营的第二个副本，而且还加载的东西为我的AJAX调用是至关重要的。

供参考，在这里是./app/assets/javascripts/application.js内容：

// This is a manifest file that'll be compiled into application.js, which will include all the files 
... 
// about supported directives. 
// 
//= require rails-ujs 
//= require react 
//= require components 
//= require turbolinks 
//= require_tree . 

和./app/assets/javascripts/server_rendering.js：

//= require react_ujs 
//= require react-server 
//= require ./components 
... 

当使用一组省略号，或...，缩短知注释部分。

• 红宝石版本：2.3.3p222（2016年11月21日修订版56859）
• 的Rails版本：5.1.1
• 反应-轨版本：2.2.0

Answer 1

第三电位回答或从./app/assets/javascripts/server_rendering.js中删除//= require react-server，这是朝正确方向迈出的一步。

删除此行不会产生新问题，它只是显示您整个时间都有的另一个错误。 react_server未定义用于AJAX调用的$变量，jQuery gem可以。

Found here。我在这个解决方案，因为错误自信：

Uncaught ReferenceError: $ is not defined

是一个jQuery的问题，因为AJAX调用你很可能使参加他们的官方文档中引用的形式。 here。

因此，在你的shell中运行gem install jquery-rails后，您./app/assets/javascripts/application.js应该是这样的：

... 
//= require rails-ujs 
//= require jquery 
//= require react 
//= require components 
//= require turbolinks 
//= require_tree . 

你./app/assets/javascripts/server_rendering.js文件应该是这样的：

//= require react_ujs 
// require react-server 
//= require ./components 
... 

注意require react-server被注释掉。

并确保遵循在this SO解答中找到的关于.\app\views\layouts\application.html.erb文件的答案。