使用 react-rails Gem 的多个未捕获错误

Question

为了回答我的问题，我正在遵循 this 指南。

尝试使用 Rails 和 React 构建 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 属性添加到 render 方法内的任何 JSX，因此我的资产管道中必须有多个 React 副本。

研究得出以下潜在结果：

引入 webpack or Searchkit, suggested in SO 答案，似乎是我简单的 CRUD 界面的笨拙解决方法。
This 未选中所以答案建议从 ./app/assets/javascripts/application.js 中删除 //= require react 行。这被证明是不成功的。
问题 #671，来自官方 GitHub react-rails 回购。 here，完美地概述了我问题的第一部分。我遵循了这个潜在的解决方案，它建议删除 ./app/assets/javascripts/server_rendering.js 文件的 //= require react-server 行。这会导致新错误，概述如下：

Uncaught ReferenceError: $ is not defined

我认为这意味着 react_server 不仅包含 React 的第二个副本，而且还加载了对我的 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
...

其中一组省略号或 ... 用于缩短已知的评论部分。

Ruby版本：2.3.3p222（2016-11-21修订版56859）
Rails版本：5.1.1
react-rails 版本：2.2.0

Answer 1

第三个可能的答案，即从 ./app/assets/javascripts/server_rendering.js 中删除 //= require react-server，是朝着正确方向迈出的一步。

删除此行不会产生新问题，它只会揭示您一直以来遇到的另一个错误。 react_server 没有为 AJAX 调用定义 $ 变量，jQuery gem 定义了

找到 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 中关于 .\app\views\layouts\application.html.erb 文件的答案中找到的解决方案。

使用 react-rails Gem 的多个未捕获错误

Multiple Uncaught Errors Using the react-rails Gem

javascript

ruby

ruby-on-rails

reactjs

react-rails