javascript - De ce este că material-ui apelează dialogurile lor de două ori?

Am încercat mai întâi să setez un modal și am observat acel comportament, apoi l-am schimbat într-un dialog și este la fel.

Am încercat asta:

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

Îl numesc în app.tsx: <MyDialog />

Și când apelez funcția pentru a afișa dialogul, acesta apare de două ori în DOM, ceea ce mă face curios este că unul dintre ele are atributul aria-hidden=true.

Dar ele au exact același conținut în interior dacă le inspectez.

Am observat ceva similar pe pagina de documentație https://material-ui.com/components/dialogs/, dacă inspectați DOM-ul, există întotdeauna un dialog, dar diferența este că are visibility: hidden.

Ai vreo idee despre asta?

Răspuns #1

Menținătorul a răspuns la întrebarea din această problemă. El a spus că comportamentul este normal datorită proprietății keepMounted, care este documentată astfel:

Păstrează întotdeauna copiii în DOM. Această proprietate poate fi utilă în situații SEO sau atunci când vrei să maximizezi receptivitatea Modalului.

Când mă uit la pagina de dialoguri a site-ului Material UI, nu văd de fapt duplicare, dar unele dintre dialogurile care au proprietatea keepMounted, care sunt deja în DOM, dar cu visibility: hidden și aria-hidden="true", devin vizibile atunci când se face clic pe deschidere.

Am încercat, de asemenea, local și, cu sau fără proprietatea keepMounted, nu am nicio duplicare. Singurul lucru este că dialogul este deja în DOM de la început sau nu. Așadar, probabil în exemplul tău ai două dialoguri diferite redimensionate, unul cu proprietatea și unul fără.