我在使用一个已经存在全局的React时,使用AMD加载React进行组件渲染时出现了奇怪的行为。组件上的点击事件被错误地触发了。
根据DOM结构来看,这似乎是由于多个React实例(一个是全局的,另一个是我的AMD实例)之间互相不知道而引起的问题。但是当在已经包含React的页面中运行时依赖于React的AMD模块时,这就会造成问题。
我该如何解决这个冲突?
复现
我可以创建如下的组件:
var ButtonComponent = React.createClass({
onButtonClick: function(){
alert(this.props.data + ' click event fired');
},
render: function() {
return React.DOM.button({onClick: this.onButtonClick}, this.props.data);
}
});
(function(){ // create vanilla
var ButtonList = React.createClass({
render: function() {
return React.DOM.div({}, React.createElement(ButtonComponent, {data: this.props.data}));
}
});
React.render(React.createElement(ButtonList, {data: 'button that was loaded by the page'}), document.getElementById('page-load-target'));
})();
但是,当我添加另一个使用React的组件,并单击第一个按钮时,它会调用第二个加载的按钮上的点击事件:
// .... as above ....
(function(){ // create using amd
require.config({
paths: {
'react': '//fb.me/react-with-addons-0.12.2.min'
}
});
window.setTimeout(function(){
require(['react'], function(ReactFromAmd){
ReactFromAmd.render(ReactFromAmd.createElement(ButtonComponent, {data: 'button that was loaded by AMD'}), document.getElementById('amd-load-target'));
});
}, 1000)
})();
如果我在这个调用中使用现有的全局版本React(而不是ReactFromAmd
),那么它会按预期工作。jsbin