javascript - 为什么 material-ui 两次调用他们的对话框？

Question

我尝试先设置一个模态，然后我注意到了这种行为，然后我将其更改为一个对话框，结果是一样的。

我试过这个:

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>
  );
});

我在 app.tsx 中调用它:<MyDialog />

当我调用函数来显示对话框时，它在 DOM 中显示了两次，让我好奇的是其中一个有 aria-hidden=true属性。

但如果我检查它们，它们内部的内容完全相同。

我在文档页面中注意到类似的东西 https://material-ui.com/components/dialogs/ ，如果你检查 DOM，总会有一个对话框，但不同的是它有 visibility: hidden .

对此有什么想法吗？

Answer 1

维护者在 this issue 中回答了问题.他告诉说，由于 keepMounted 属性，该行为是正常的，记录如下:

Always keep the children in the DOM. This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Modal.

当我查看 material ui 网站的对话框页面时，我实际上并没有看到重复，但是一些具有 keepMounted 属性的对话框已经在 DOM 中但是带有 visibility: hidden 和 aria-hidden="true"，点击打开时可见。

我也在本地尝试过，无论是否使用 keepMounted Prop ，我都没有重复。只有对话框从一开始就已经在 DOM 中的事实。因此，在您的示例中，您可能呈现了两个不同的对话框，一个带有 Prop ，一个没有。