為什么 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 />

當我調用 function 來顯示對話框時，它在 DOM 中顯示了兩次，讓我好奇的是其中一個具有aria-hidden=true屬性。

但是如果我檢查它們，它們里面的內容完全相同。

我在文檔頁面https://material-ui.com/components/dialogs/中注意到類似的內容，如果您檢查 DOM，總是有一個對話框，但不同之處在於它具有visibility: hidden 。

有什么想法嗎？

Answer 1

維護者在這個 issue 中回答了這個問題。 他告訴我們，由於keepMounted prop，這種行為是正常的，記錄如下：

始終將孩子保留在 DOM 中。 此道具在 SEO 情況下或當您想要最大化 Modal 的響應能力時很有用。

當我查看材料 ui 網站的對話框頁面時，我實際上並沒有看到重復，但是一些具有keepMounted的對話框已經在 DOM 中但具有visibility: hidden和aria-hidden="true" ，並在單擊打開時可見。

我也在本地嘗試過，無論是否使用keepMounted道具，我都沒有重復。 只有對話框從一開始就已經在 DOM 中的事實。 因此，可能在您的示例中，您渲染了兩個不同的對話框，一個帶有道具，一個沒有。