使用 npm 模块（react-loader）的 Reactjs 不变违规答案

【问题标题】：Reactjs Invariant Violation with npm module (react-loader)使用 npm 模块（react-loader）的 Reactjs 不变违规
【发布时间】：2015-09-28 09:42:58
【问题描述】：

我正在尝试让 react-loader 使用我的 react 组件。

目前我有以下 sn-p:

/** @jsx React.DOM */
var Loader = require('react-loader');


var DisplayController = React.createClass({      

    // etc ..

    getInitialState: function(){
        return {
            active_tab: 0,
            tabs: [],
            groupsData: {
                objects: [{sub_groups:[]}]
            }, 
            itemsData: {objects: []},
            active_sub_tab: "Most Recent",
            loaded :false
        };
    },
    componentDidMount: function() {
        this.getGroupsApi();
        this.getItemsApi();
    },
    render: function() {

        return (<Loader loaded={this.state.loaded}> <MainMenu/>  </Loader>);
    }
});

当我添加此代码时，它开始给我以下错误：

未捕获的错误：不变违规：addComponentAsRefTo(...): Only a ReactOwner 可以有 refs。这通常意味着您正在尝试添加对没有所有者的组件的引用（也就是说，不是在另一个组件的 render 方法中创建）。尝试渲染这个组件位于一个新的顶级组件中，该组件将保存参考。

我按照模块提供的说明进行操作，为什么会收到此错误？

【问题讨论】：

我也看到了同样的问题。已作为问题提出github.com/quickleft/react-loader/issues/22
仔细检查你的脚本是否加载了多个 React 副本

标签： javascript npm reactjs

【解决方案1】：

我也看到了这个问题，我的原因是“多重反应”。我将 React 与 Bower 一起使用，并将这个 react-loader 与 npm(browserify) 一起使用。于是我把React改成npm，这个问题就解决了。

【讨论】：