[英]Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method
I have written a self-contained component and it works properly If I am running this component as a stand-alone component. 我编写了一个独立的组件,它正常工作如果我将此组件作为独立组件运行。 I'd like to release this component as NPM module so I can share this component.
我想将此组件作为NPM模块发布,以便我可以共享此组件。 In my sample application I've defined the path to the module in my package.json and it's being pulled down by NPM fine.
在我的示例应用程序中,我已经在package.json中定义了模块的路径,并且正在被NPM拉下来。 I am using webpack for bundling and it successfully builds the package but when I run the code in the browser I get
我正在使用webpack进行捆绑,并且它成功构建了包,但是当我在浏览器中运行代码时,我得到了
Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs.
未捕获的不变违规:addComponentAsRefTo(...):只有ReactOwner可以有refs。 You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded
您可能正在向组件的render方法中未创建的组件添加ref,或者您有多个React副本已加载
I had spent a full day and tried few hacks but I am not able to found the exact root cause of the issue? 我花了一整天时间尝试过几次黑客攻击,但是我无法找到问题的确切根本原因?
In your webpack config use this in the external configuration like: 在你的webpack配置中,在外部配置中使用它,如:
output: {
path: __dirname + "/dist",
filename: 'bundle.js',
// library: 'hello-007',
libraryTarget: 'umd',
},
externals: [{
'react': {
root: 'React',
commonjs2: 'react',
commonjs: 'react',
amd: 'react'
}
}, {
'react-dom': {
root: 'ReactDOM',
commonjs2: 'react-dom',
commonjs: 'react-dom',
amd: 'react-dom'
}
}],
module : {
loaders : [
{
test : /\.js?/,
loader : 'babel'
}
]
},
There is other way to have a ref in code which is also solving this issue. 还有其他方法可以在代码中使用ref,这也解决了这个问题。 use ref like this
像这样使用ref
<div className="nav-window-content"
ref={(node) => this.menuList = node}>
and for getting the reference use
this.menuList
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.