“只有ReactOwner可以参考”是什么 意思？
我有一个简单的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.
我GOOGLE了，但无法弄清楚我需要做什么来解决这个问题。
对于那些正在使用OP和消息反馈的人来说，这是一个通知。 你的结构看起来像
project client node_modules react redux-devtools node_modules react
客户端的代码将需要第一个反应模块; 在还原 – devtools将需要其他反应。 反应模块保持状态，并假定它具有所有的状态。
你得到OP的消息，因为你的状态在两个反应模块之间分开。 这种情况是我相信@asbjornenge所指的。
我用webpack捆绑了客户端代码，所以我用它来处理这个问题。 您可以强制所有require和import来始终使用第一个反应，方法是将以下内容添加到webpack.config.js中
module.exports = { ... resolve: { alias: { 'react': path.join(__dirname, 'node_modules', 'react') }, extensions: ['', '.js'] }, ... );
如果在运行在节点上的非捆绑代码出现这种情况，我还没有研究过需要做什么。
我遇到这个错误，当我使用的组件模块有自己的反应依赖项安装。 所以我使用了React的多个版本。
确保不要在你的package.json dependencies中列出反应。
这就是为什么我们有peerDependencies 😉
以防万一。 请注意您正在使用的React模块名称（区分大小写）。 我碰巧遇到同样的错误，我尝试在两个单独的模块中require不同名称的React依赖项。
//module1.js var React = require('react'); ... //module2.js var React = require('React'); ....
它的工作，甚至呈现的东西，但只有一个ReactOwner可以refs …出现错误。
重新排列脚本解决了这个问题。
错误。
<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
在开发使用npm link链接到testing项目的反应模块时，我看到了这个错误。 切换到正常的依赖解决了这个问题。
似乎React不喜欢npm link 。
还有另一种情况。
我在webpack.config.js中将React设置为外部库，并从cdnjs导入react.js。
externals: { 'react': 'React' }
当我使用ui库取决于React，例如material-ui，react-bootstrap时，发生了这个问题。
正在用我的旧笔写字。 确保在你的项目的根目录package.json尽可能早地移动反应依赖。 你还在问题？ ＆如果您使用npm模块和grunt任务，您可以添加下面的清理任务来删除内部组件反应（重复）。
clean: { react : ['node_modules/**/react','!node_modules/react'] },
我把我的package.json文件上移一层后，看到了这个错误，所以我在我的项目中有两个node_modules目录（一个在./node_modules ，另一个在./web/node_modules ）。 删除旧的目录解决了这个问题。
对我来说，同样的问题的原因是，我作为窗口对象的属性全局导入ReactDom ，像这样：
import ReactDOM from 'react-dom' window.ReactDOM = ReactDOM
删除window.ReactDOM = ReactDOM修复了这个问题。
类似于这个答案 ，我看到这个错误，同时使用一个单独的模块，我已经在一个单独的目录中使用yarn link 。
解决方法是在我的项目的工作目录中运行yarn unlink module-name 。 然后，我删除了node_modules并运行了yarn upgrade module-name和yarn以便于测量。
