什么是“只有 ReactOwner 可以有 refs。” 意思是？

IT技术 reactjs
2021-04-09 03:23:46

我有一个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.

我已经用谷歌搜索了它，但无法弄清楚我需要做什么来解决这个问题。

6个回答

对于使用 react 和 redux-devtools 并收到 OP 消息的人来说，这是仅供参考。你的结构看起来像

project
  client
  node_modules
    react
    redux-devtools
      node_modules
        react

客户端中的代码将需要第一个 react module；在 redux-devtools 中将需要其他react。react module保持状态并假设它拥有所有状态。

您会收到 OP 的消息，因为您的状态在 2 个reactmodule之间拆分。这种情况是我相信@asbjorenge 所指的。

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

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

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

仅供参考 - 我个人不得不使用 process.cwd() 而不是 dirname，但这确实有效并且非常有用。干杯
2021-05-26 03:23:46
为什么你需要extensionsproperty 以及 resolve.alias？
2021-05-29 03:23:46
考虑到 JS 开发社区的碎片化和混乱程度，我迄今为止看到的最简单的解决方案
2021-06-12 03:23:46
你值得一枚奖牌！一个糟糕的问题，真的 - 理智又回来了。
2021-06-19 03:23:46
这完全取决于您的 webpack.config 文件位于@netpoetica 的位置。process.cwd() 可能比 __dirname 更正确。
2021-06-21 03:23:46

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

确保不要dependencies在您的package.json.
这就是为什么我们有peerDependencies;-)

@JohnSz peerDependencies 不会被删除，它们只会发出警告而不是自动安装。参见github.com/npm/npm/issues/6565#issuecomment-74971689。
2021-05-25 03:23:46
我的问题是加载脚本的顺序。我在 react-dom.js 之前加载 react-with-addons.js。而问题就出现了。我怀疑 react-with-addons.js 中是否有一些功能 :)
2021-06-04 03:23:46
NPM 3.0 中不是删除了对等依赖项吗？然后怎样呢？
2021-06-14 03:23:46
啊! 谢谢你。我在测试中不小心编译了两个版本的 React 并出现了这个错误。我永远不会自己找到它。菜鸟失误！
2021-06-16 03:23:46

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

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

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

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

你只要救我！我已经疯狂地挖掘了 20 分钟。我读了这篇文章，低头看着我的编辑。果然，一个巨大的“require('React')”正盯着我看。
2021-05-23 03:23:46

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

错误的。

<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

两者都包含react并且是react-with-addons必要的吗？后者不包括前者的所有代码吗？
2021-06-14 03:23:46

我在开发一个使用npm link. 切换到常规依赖解决了这个问题。

React 似乎不喜欢npm link.

npm link是一种使用目录（通过符号链接）代替由npm. 删除符号链接并重新启动可以npm install解决问题。
2021-05-22 03:23:46
“切换到常规依赖项”是什么意思？
2021-06-07 03:23:46
其它你可能感兴趣的问题
上一篇Reactjs：意外的标记“<”错误 下一篇material-ui Drawer - 在 StrictMode 中不推荐使用 findDOMNode