我有一个简单的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.
我已经用谷歌搜索过了,但我不知道我需要做些什么来解决这个问题。
发布于 2015-09-08 02:09:14
这是为使用react和redux-devtools的人提供的参考,这些人正在接收OP的消息。你的结构看起来像
project
client
node_modules
react
redux-devtools
node_modules
react
客户端中的代码将需要第一个react模块;redux-devtools中的代码将需要另一个react模块。react模块保持状态,并假定它具有所有状态。
你得到了OP的消息,因为你的状态被分成了两个react模块。我相信@asbjornenge指的就是这种情况。
我把客户端代码和webpack捆绑在一起,所以我用它来处理这个问题。通过将以下内容添加到webpack.config.js中,可以强制所有require
和import
始终使用第一个react
module.exports = {
...
resolve: {
alias: {
'react': path.join(__dirname, 'node_modules', 'react')
},
extensions: ['', '.js']
},
...
);
如果在节点上运行非捆绑的代码时发生这种情况,我还没有考虑到我需要做什么。
发布于 2015-03-26 19:46:25
当我使用的组件模块安装了自己的react依赖项时,我遇到了这个错误。所以我使用了React的多个版本。
确保没有在package.json
中的dependencies
下列出react。
这就是我们有peerDependencies
的原因;-)
发布于 2016-09-09 14:44:29
在开发使用npm link
链接到测试项目的react模块时,我看到了这个错误。切换到常规依赖关系解决了这个问题。
看起来React不喜欢npm link
。
https://stackoverflow.com/questions/28519287
复制相似问题