Global React 不能很好地与 AMD React 配合使用答案

【问题标题】：Global React does not play nice with AMD ReactGlobal React 不能很好地与 AMD React 配合使用
【发布时间】：2015-04-25 11:44:39
【问题描述】：

当页面上已经存在全局 React 时，使用加载 AMD 的 React 渲染组件时，我遇到了奇怪的奇怪行为。组件上的点击事件在不应该被触发时被触发。

查看 DOM 意味着这源于多个 React 实例（一个全局实例，在我的例子中是一个 AMD）彼此不了解，但这在运行时加载依赖于 React 的 AMD 模块时会产生问题，进入一个同样包含 React 的页面。

我该如何解决这种冲突？

复制

我可以制作这样的组件：

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 实例添加另一个组件然后单击第一个按钮，它就会在第二个加载的按钮上调用 click 事件：

// .... 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

【问题讨论】：

jsbin 的 HTML 选项卡很奇怪。请刷新示例并确保它们包含有效的 HTML 文档。
在这里提交的 Github 问题：github.com/facebook/react/issues/3252

标签： reactjs amd

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

如果你不介意用 browserify 替换 AMD，我只是想出了一种方法让隔离/远程加载的 React 组件很好地共存。

（如有需要，待续）

【讨论】：