全局React与AMD React不兼容

Question

我在使用一个已经存在全局的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'));

})();

jsbin

但是，当我添加另一个使用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)

})();

jsbin

如果我在这个调用中使用现有的全局版本React（而不是ReactFromAmd），那么它会按预期工作。jsbin

- sennett

---

jsbin在HTML选项卡上出现了问题。请刷新示例并确保它们包含有效的HTML文档。 - sennett

在这里提交了一个Github问题：https://github.com/facebook/react/issues/3252 - sennett

Answer 1

ButtonComponent 的祖先（React 实例）和使用 ReactFromAmd.createElement 创建的组件是不同的，但它们位于同一虚拟 DOM 中 -- 这是不允许的。

如果你不介意用 browserify 替换 AMD，我刚想出了一个方法，让独立/远程加载的 React 组件能够很好地共存。

(如果有需要，将继续下文)

- wizawu

Answer 2

这个问题已经在0.14.2版本中得到修复：http://jsbin.com/tesodoxape/1/edit?html,js,output

- sennett