ReactDnD: “Invariant Violation: addComponentAsRefT

问题:

Dear people of StackOverflow,

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 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);

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

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

<%= react_component 'Components.App' %>

回答1:

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.