'Only a ReactOwner can have 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;

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

  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 消息的人来说，这是仅供参考。你的结构看起来像

project
  client
  node_modules
    react
    redux-devtools
      node_modules
        react

client 中的代码将需要第一个 react 模块；在 redux-devtools 中需要其他反应。 react 模块保持状态并假设它具有所有状态。

您收到 OP 的消息，因为您的状态在 2 个反应模块之间拆分。我相信@asbjornenge 指的是这种情况。

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

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

如果在节点上运行非捆绑代码时发生这种情况，我还没有研究我需要做什么。

Answer 2

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

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

Answer 3

以防万一。请注意您使用的 React 模块名称（区分大小写）。当我碰巧尝试在两个单独的模块中使用不同名称的 require React 依赖项时，我遇到了同样的错误。

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

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

它可以工作，甚至可以渲染一些东西，但是 Only a ReactOwner can have refs... 出现错误。

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 好像不喜欢npm link。

Answer 6

还有另一种情况。

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

externals: {
  'react': 'React'
}

当我使用依赖于 React 的 ui 库时，例如 material-ui，react-bootstrap，出现此问题。

Answer 7

我正在用我的旧笔写字。确保在您的项目根 package.json 中尽早移动 react 依赖项。你还有问题吗？ & 如果你正在使用 npm 模块和 grunt 任务，你可以在下面添加 clean 任务来移除内部组件 react(duplicates)。

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 文件夹。问题解决了。