Блог

Главная - Вопросы по программированию - Почему material-ui вызывает их диалоги дважды?

Почему material-ui вызывает их диалоги дважды?

#javascript #reactjs #typescript #ecmascript-6 #material-ui

#javascript #reactjs #typescript #ecmascript-6 #material-ui

Вопрос:

Сначала я попытался установить модальное значение, и я заметил это поведение, затем я изменил его на диалоговое окно, и оно то же самое.

Я попробовал это:

 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 .

Есть идеи по этому поводу?

введите описание изображения здесь

Комментарии:

1. Вы можете отобразить что-то еще в этом MyDialog компоненте, чтобы подтвердить, является ли эта проблема специфичной для компонента диалогового окна material UI или MyDialog она отображается дважды.

2. Вы решили это?

Ответ №1:

Сопровождающий ответил на вопрос в этом выпуске. Он сказал, что поведение является нормальным из-за keepMounted prop, что задокументировано следующим образом:

Всегда сохраняйте дочерние элементы в DOM. Этот реквизит может быть полезен в ситуации SEO или когда вы хотите максимизировать отзывчивость модала.

Когда я смотрю на страницу диалогов веб-сайта material ui, я на самом деле не вижу дублирования, но некоторые диалоги, в которых есть keepMounted prop , которые уже есть в DOM, но с visibility: hidden and aria-hidden="true" , и становятся видимыми при нажатии на open .

Я также пробовал локально, и с помощью или без keepMounted поддержки у меня нет дублирования. Только тот факт, что диалог уже находится в DOM с самого начала или нет. Так что, вероятно, в вашем примере у вас есть два разных диалоговых окна, одно с реквизитом, а другое без.

Метки: