ReactJS & Material UI - ClickawayListener 在 Shadow DOM 中无法正常工作

Question

我正在尝试使用 ReactJS 和 Material UI 框架构建微前端应用程序。作为其中的一部分，我尝试使用 ShadowDOM 将 React 应用程序嵌入到主 React App 中。

我得到了应用程序运行并正常工作，除了在打开弹出窗口、对话框、模式或日期选择器时，ClickAwayListener 未按预期运行，这意味着未关闭。

请提出解决此问题的方法或向我展示获取应用程序的解决方法运行。

Answer 1

找到解决方法：

首先，在您的影子根上创建一个点击侦听器以触发名为 closeModal 的 CustomEvent。

const shadowRoot = document.getElementById('root').attachShadow({open: true});
let mountPoint = document.createElement('div');
mountPoint.id = "portal";

mountPoint.addEventListener('click', (e) => {
    let event = new CustomEvent('closeModal',{bubbles: true, cancelable: false});
    shadowRoot.dispatchEvent(event);
});

ReactDOM.render(themeProvider, mountPoint);

然后，当弹出窗口或模式或日期选择器或对话框打开时，创建另一个事件侦听器

document.getElementById('root').shadowRoot.addEventListener('closeModal', this.handleClose);

一旦模式被handleClose函数关闭，移除事件监听器

document.getElementById('root').shadowRoot.removeEventListener('closeModal', this.handleClose);

就是这样。

Answer 2

我没有看到 ClickAwayListener 在您的 CodeSandbox link 中的什么地方被使用，但我猜想这个问题是因为您没有将内部元素包装在可以接受一个ref。尝试将子元素包装在 <div> 中，看看它能把你带到哪里。 :)

ReactJS & Material UI - ClickawayListener 在 Shadow DOM 中无法正常工作

ReactJS & Material UI - ClickawayListener is not working properly in the Shadow DOM

shadow-dom

reactjs

material-ui