什么'只有一个ReactOwner可以有refs'.意思？

Question

我有一个react带有表单的简单组件:

var AddAppts = React.createClass({
    handleClick: function() {
        var title = this.refs.title.getDOMNode().value;
        ....

        var appt = {
            heading: title
            ...
        }

        CalendarActions.addAppointment(appt);
    },

    render: function() {
        return (
            <div>
                <label>Description</label>
                <input ref="title"></input>
                ...
            </div>
        );
    }
});
module.exports = AddAppts;

我render在另一个react组件中尝试这个组件:

  var AddAppt = require('./AddAppts');

  render: function() {
    return (
      <div>
        <AddAppt />
      </div>
    );
  }

但我得到这个错误:

 Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). Try rendering this component inside of a new top-level component which will hold the ref.

我用谷歌搜索了它,但无法弄清楚我需要做些什么来解决这个问题.

Answer 1

这是使用react和redux-devtools获得OP消息的人的FYI.你的结构看起来像

project
  client
  node_modules
    react
    redux-devtools
      node_modules
        react

客户端中的代码将需要第一个反应模块; 在redux-devtools中需要另一个反应.react模块保持状态并假定它具有所有状态.

您收到OP的消息,因为您的状态在两个反应模块之间分配.这种情况是我认为@asbjornenge所指的.

我正在用webpack捆绑客户端代码,所以我用它来处理这个问题.您可以通过将以下内容添加到webpack.config.js 来强制所有require并import始终使用第一个响应

module.exports = {
  ...
  resolve: {
    alias: {
      'react': path.join(__dirname, 'node_modules', 'react')
    },
    extensions: ['', '.js']
  },
  ...
);

如果在节点上运行非捆绑代码的情况发生,我还没有考虑我需要做什么.

Answer 2

当我使用的组件模块安装了自己的反应依赖项时,我遇到了这个错误.所以我使用的是React的多个版本.

确保不要列出dependencies你的反应package.json.
这就是为什么我们有peerDependencies;-)

Answer 3

以防万一.请注意您正在使用的React模块名称(区分大小写).我有同样的错误,巧合的是我试图require在两个独立的模块中使用不同的名称来实现依赖.

//module1.js
var React = require('react');
...

//module2.js
var React = require('React');
....

它工作,甚至渲染一些东西,但只有一个ReactOwner可以有refs ...错误出现.