Javascript 为什么MaterialUI会调用他们的对话框两次？

我试着先设置一个模态，我注意到了这个行为，然后我把它改成了一个对话框，它是一样的

我试过这个：

import Dialog, { DialogProps } from '@material-ui/core/Dialog';
import { useStores } from './stores';
import { useObserver } from 'mobx-react';

export const MyDialog: React.FC<Partial<DialogProps>> = (props) => useObserver(() => {
  const { uiStore: { dialogConfig: { open, body } } } = useStores();

  if (!body) { return null; }

  return (
    <Dialog {...{ ...props, open, maxWidth: false }}>
      { body }
    </Dialog>
  );
});

import Dialog，{DialogProps}来自“@material ui/core/Dialog”；
从“/stores”导入{useStores}；
从“mobx react”导入{useObserver}；
导出常量MyDialog:React.FC=（props）=>useObserver（（）=>{
const{uiStore:{dialogConfig:{open，body}}}=useStores（）；
如果（！body）{return null；}
返回(
{body}
);
});

我在app.tsx中调用它：

当我调用函数来显示对话框时，它在DOM中显示了两次，让我好奇的是其中一个函数具有

aria hidden=true

属性

但是如果我检查它们的话，里面的内容是完全一样的

我注意到docs页面中有类似的内容，如果您检查DOM，总是会有一个对话框，但区别在于它具有

可见性：hidden

有什么想法吗

---

维修人员在中回答了这个问题。他说，由于

keepMounted

prop，该行为是正常的，记录如下：

总是让孩子们呆在家里。这个道具在搜索引擎优化的情况下，或者当你想最大限度地提高模型的响应能力时，都会很有用

当我查看material ui网站的对话框页面时，我实际上并没有看到重复，而是看到了一些带有

keepMounted

属性的对话框，这些对话框已经在DOM中，但是具有

可见性：hidden

和

aria hidden=“true”

，并且在单击open时可见

---

我也在本地尝试过，无论是否使用

keepMounted

prop，我都没有重复。只有对话框从一开始就已经在DOM中这一事实。因此，在您的示例中，可能呈现了两个不同的对话框，一个带道具，一个不带道具。

您可以在此

MyDialog

组件中呈现其他内容，以确认此问题是否特定于材质UI对话框组件，或者您的

MyDialog

呈现了两次。