Question

为了提出问题，我正在关注this指南。

尝试使用Rails和React构建CRUD界面时，在尝试创建新项目时收到this错误：

addComponentAsRefTo（...）：只有ReactOwner可以有refs。您可能正在向未在组件的渲染方法中创建的组件添加引用，或者您已经加载了多个React副本。

我没有不正确地将ref属性添加到任何不在render方法内的JSX，因此我必须在我的资产管道中拥有多个React副本。

研究产生了以下潜在结果：

webpack或Searchkit的建议，在this SO回答中提出，似乎是我简单的CRUD界面的笨重变通方法。
This未经选择的SO回答建议从//= require react删除./app/assets/javascripts/application.js行。事实证明这是不成功的。
问题＃671，来自官方的GitHub react-rails repo。 here，完美地概述了我的问题的第一部分。我遵循了这个潜在的解决方案，建议删除//= require react-server文件的./app/assets/javascripts/server_rendering.js行。这导致了一个新的错误，概述如下：

未捕获的ReferenceError：$未定义

我认为这意味着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 version：2.2.0

Answer 1

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

删除此行并不会产生新问题，它只会显示您在整个时间内遇到的其他错误。 react_server没有为AJAX调用定义$变量，jQuery gem会这样做。

找到here。我对此解决方案充满信心，因为错误：

未捕获的ReferenceError：$未定义

是一个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宝石

1 个答案: