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捆绑客户端代码，所以我用它来处理这个问题。您可以强制所有require和import始终使用第一个反应，方法是将以下内容添加到webpack.config.js

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

如果在节点上运行非捆绑代码时出现这种情况，我还没有考虑过我需要做什么。

Answer 2

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

请确保不在dependencies的{{1}}下列出反应这就是为什么我们有package.json; - ）

Answer 3

以防万一。请注意您正在使用的React模块名称（区分大小写）。我巧妙地尝试require在两个独立的模块中使用不同的名称来反应依赖。我有同样的错误。

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

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

它可以工作，甚至渲染一些东西，但只有一个ReactOwner可以有引用... 错误出现。

Answer 4

重新排列脚本解决了问题。

<强>错误。

<script src="./lib/react.js"></script>
<script src="./lib/react-dom.js"></script>
<script src="./lib/react-with-addons.js"></script>

<强>正确

<script src="./lib/react.js"></script>
<script src="./lib/react-with-addons.js"></script>
<script src="./lib/react-dom.js"></script>

参考https://github.com/gcanti/tcomb-form/issues/107#issuecomment-150891680

Answer 5

我在开发使用npm link链接到测试项目的react模块时看到了这个错误。切换到常规依赖关系解决了这个问题。

似乎React不喜欢npm link。

Answer 6

还有另一种情况。

我将React设置为webpack.config.js中的外部库，并从cdnjs导入react.js。

externals: {
  'react': 'React'
}

当我使用ui库依赖于React时，例如material-ui，react-bootstrap，就会出现这个问题。

Answer 7

我正用旧笔写字。确保你的项目根目录package.json尽可能早地反应依赖。你还有问题吗？＆安培;如果你正在使用npm模块和grunt任务，你可以添加以下清洁任务来删除内部组件反应（重复）。

clean: { react : ['node_modules/**/react','!node_modules/react'] },

Answer 8

我将package.json文件移到某个级别后看到此错误，因此我的项目中有2个node_modules目录（./node_modules中的一个目录和./web/node_modules中的另一个目录）。删除旧目录修复了问题。

Answer 9

对我来说，同样问题的原因是我全局导入ReactDom作为窗口对象的属性，如下所示：

import ReactDOM from 'react-dom'
window.ReactDOM = ReactDOM

删除window.ReactDOM = ReactDOM解决了问题。

Answer 10

与this answer类似，我在使用我使用yarn link在单独目录中开发的单独模块时看到此错误。

解决方案是在项目的工作目录中运行yarn unlink module-name。然后我删除了node_modules并运行yarn upgrade module-name和yarn以获得良好的衡量标准。

Answer 11

而不是

<input ref="title"></input>

试试这个

<input ref={(title) => this.title = title}></input>

Answer 12

给定的解决方案都无法为我工作，尽管它们确实可以帮助我了解如何查找。

由于某种原因，我的项目有两个node_modules文件夹-一个在根目录中，一个在更高级别。我是React的新手，所以我不知道这是否正常还是什么。当我开始一个新项目时，我只是使用Visual Studio给我的东西。

无论如何，我知道是哪个模块导致了问题，而且它恰好只存在于node_modules文件夹的一个中。

我将问题模块移至另一个node_modules文件夹。问题解决了。

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

12 个答案: