Question

当页面上已存在全局React时，使用支持AMD的React渲染组件时，我会遇到奇怪的奇怪行为。组件上的Click事件在不应该被触发时被触发。

看看DOM意味着这源于多个React实例（一个全局，一个AMD在我的情况下）彼此没有意识到，但这在运行时加载AMD模块时会出现问题，这取决于React，进入一个也包含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

Answer 1

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

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

（如果有人需要，继续）

Answer 2

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

Global React与AMD React不相称

生殖

2 个答案: