Javascript React ref不工作不变冲突:addComponentAsRefTo
我在向react组件添加ref时遇到问题。下面是错误消息Javascript React ref不工作不变冲突:addComponentAsRefTo,javascript,html,reactjs,npm,Javascript,Html,Reactjs,Npm,我在向react组件添加ref时遇到问题。下面是错误消息 invariant.js:39Uncaught Invariant Violation: addComponentAsRefTo(...): 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, or you have multi
invariant.js:39Uncaught Invariant Violation: addComponentAsRefTo(...): 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, or you have multiple copies of React loaded
研究表明,这可能是由于某种原因造成的,而这两种情况似乎都不是问题所在
只有所有者才能有引用
这是我不熟悉react的最可能原因。我有一个容器被渲染,然后一个select元素被渲染到容器中
代码
似乎也没有重复的包?关于这里可能发生的事情有什么想法吗?我有一个类似的问题,并且能够通过不使用字符串引用来解决它 好:
{this.textInput=input}}/>
坏的:
请在此处查看文档:
他们实际上说不要这样做:
如果您以前使用过React,您可能会熟悉一个旧的API,其中ref属性是字符串,如“textInput”,并且DOM节点作为this.refs.textInput访问。我们建议不要这样做,因为字符串引用有一些问题,被认为是遗留的,并且可能在将来的某个版本中被删除。如果您当前正在使用this.refs.textInput访问refs,我们建议改为使用回调模式。“请不要对多个问题发布相同的答案。发布一个好答案,然后投票/标记以重复方式关闭其他问题。如果问题不是重复的,请根据问题定制您的答案。
var React = require('react');
var first_container = React.createClass({
render: function() {
return (
<div id='first-container' className='jumbotron'>
<div className='row'>
<button type='button' className='btn btn-primary'>Submit Query</button>
</div>
</div>
);
}
});
var product_selections = React.createClass({
handleChange: function() {
console.log("hello");
},
componentDidMount: function (){
$(this.refs['product-select']).select2({
change: this.handleChange
});
},
render: function() {
return (
<div className='row'>
<br/>
<label htmlFor='product-dropdown'>
Product
<br/>
<select ref='product-select' className='js-example-basic-multiple js-states form-control' id='product-dropdown' multiple='multiple'>
</select>
</label>
</div>
);
}
});
npm ls | grep react
├─┬ react@15.2.1
├── react-addons@0.9.0
├── react-bootstrap@0.29.5 extraneous
├── react-dom@15.2.1
├─┬ reactify@0.15.2
│ ├─┬ react-tools@0.12.2
<input ref={(input) => { this.textInput = input }} />
<input ref="textInput" />