最近正在开发的项目,需要引入其他团队已经开发完毕项目中的某一个模块,考虑到复用性,以及未来及时同步引用模块的迭代更新,所以选择使用qiankun框架来进行子应用的加载。
遇到的问题:
为了很好的解决两个React项目之间的样式冲突,选择严格模式(shadow dom)来进行隔离,但却引发了另一个问题,子应用中的事件流回调无法被执行。
分析原因:
1.由于 shadow dom 隔离的特性,shadow dom 内部事件被外部捕获时,event 的 target 将会被重定向为 shadow host 元素。
2.子项目使用的是React16版本,而在 React 17 之前,React 的合成事件都是委托在 document 上并且在冒泡阶段执行的。所以当点击等事件发生,事件流冒泡到document上时,target并不是正确的目标,也就无法找到对应的执行回调,完成执行。
接口对策:
1.将子应用的React版本升级到17以上,因为React17版本以后,合成事件都被委托到了Root节点上,这样冒泡阶段就能准确执行对应的事件回调了。(这里考虑到子应用框架升级所伴随的代码调整所需付出的时间、人力成本,因此并没有选用,而是采用的第二种方案)
2.使用react-shadow-dom-retarget-events库,重写shadow dom下的事件流执行,本质就是手动在shadow dom 中监听这个事件,然后再次派发到对应的dom中。