ReactDnD:“不变违规:addComponentAsRefTo"错误 [英] ReactDnD: "Invariant Violation: addComponentAsRefTo" Error

问题描述

StackOverflow的朋友们，

Dear people of StackOverflow,

我正在尝试在React-Rails应用程序中实现拖放功能.但是，将DragDropContext添加到顶层组件后，立即在浏览器控制台中看到此错误:

I am trying to implement Drag and Drop functionality in a React-Rails app. However, as soon as I add the DragDropContext to the top level component, I see this error in the browser console:

'react.self-0f0e88a .... js?body = 1:1087未捕获的错误:始终违规:addComponentAsRefTo(...):只有ReactOwner可以具有引用.您可能正在向未在组件的render方法内部创建的组件添加引用，或者您已加载多个React副本'

'react.self-0f0e88a….js?body=1:1087 Uncaught Error: Invariant Violation: 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'

这是我目前为该应用编写的唯一代码:

This is the only code I currently have for the app:

var App = React.createClass({
    render: function() {
        return (
            <div>
                Hello
            </div>
        );
    }
});

Components.App = DnD.DragDropContext(HTML5Backend)(App);

添加这一行代码会导致我们所有的PhantomJS集成测试失败.任何帮助，将不胜感激.谢谢！

Adding this one line of code is causing all of our PhantomJS integration tests to fail. Any help would be appreciated. Thanks!

根据要求，这是我们在其中渲染App的index.html.erb.

As requested, here is our index.html.erb where we render App.

<%= react_component 'Components.App' %>

推荐答案

稍微研究一下react版本后，我们发现实际上实际上同时使用了两个版本的react.一个隐藏在react-rails内部，另一个隐藏在我们的节点模块中.我们从链轮文件中删除了"require"react"语句，现在一切似乎都可以正常工作.

After a little digging into the react version, we discovered that we actually had two versions of react being used at the same time. One was hidden inside react-rails, while the other was from our node-modules. We removed the 'require "react"' statement from our sprockets file, and everything seems to work now.

这篇关于ReactDnD:“不变违规:addComponentAsRefTo"错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！