ReactJS 和 Material UI - ClickawayListener 在 Shadow DOM 中无法正常工作答案

【问题标题】：ReactJS & Material UI - ClickawayListener is not working properly in the Shadow DOMReactJS 和 Material UI - ClickawayListener 在 Shadow DOM 中无法正常工作
【发布时间】：2020-01-18 22:23:24
【问题描述】：

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

除了打开弹出框、对话框、模式或日期选择器时，我的应用程序正在运行和工作，ClickAwayListener 没有按预期运行，这意味着没有关闭。

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

Code Sandbox

【问题讨论】：

标签： reactjs material-ui shadow-dom

【解决方案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);

就是这样。

【讨论】：

【解决方案2】：

我看不到您的 CodeSandbox 链接中使用了ClickAwayListener，但我猜这是因为您没有将内部元素包装在可以接受ref 的元素中。尝试将子元素包装在 <div> 中，看看你会得到什么。 :)

【讨论】：

我试过了，但没有按预期工作。因此创建了自定义事件来解决这个问题。