gpt4 book ai didi

reactjs - Global React 与 AMD React 配合不佳

转载 作者:行者123 更新时间:2023-12-03 13:39:10 24 4
gpt4 key购买 nike

当页面上已经存在全局 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 实例添加另一个组件,然后单击第一个按钮,它就会调用第二个加载按钮上的单击事件:

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

最佳答案

ButtonComponent 的祖先s(React 实例)和使用 ReactFromAmd.createElement 创建的组件是不同的,但它们都在相同的虚拟 DOM——这是不允许的。

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

(如果有人需要,可继续)

关于reactjs - Global React 与 AMD React 配合不佳,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28685857/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com