Почему обратный вызов используется в качестве условия в тернарном операторе для компонента диалога пользовательского интерфейса материала?

Я пытаюсь воссоздать компонент Customized Dialog пользовательского интерфейса материала в соответствии с эта секция документации, и я не могу понять, почему функция обратного вызова onClose используется для отображения компонента IconButton в DialogTitle:

<DialogTitle sx={{ m: 0, p: 2 }} {...other}>
      {children}
      {onClose ? (
        <IconButton
          aria-label="close"
          onClick={onClose}
          sx={{
            position: 'absolute',
            right: 8,
            top: 8,
            color: (theme) => theme.palette.grey[500],
          }}
        >
          <CloseIcon />
        </IconButton>
      ) : null}
    </DialogTitle>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Насколько я понимаю, IconButton всегда отображается, если вы правильно настроили состояние. Мне просто интересно, есть ли конкретная причина или шаблон для использования функции обратного вызова onClick внутри тернарного оператора? Я попытался вообще удалить тернарный оператор, и все работает так же.

Вы не должны помещать обратный вызов в качестве условия, состояние должно быть там, и обратный вызов должен переключать его, отображать или не отображать. Надеюсь, я правильно понял вашу проблему.

Tigran Petrosyan 10.04.2022 19:41

Да, я это понимаю, но этот фрагмент кода взят прямо из официальной документации в MUI.

Raybeck 10.04.2022 19:43

Можешь ссылкой поделиться, пожалуйста?

Tigran Petrosyan 10.04.2022 19:44

Об этом упоминалось в посте, но вот еще раз: mui.com/material-ui/react-dialog/#customization

Raybeck 10.04.2022 19:45

Что ж, это немного странно :D, но имеет смысл, если коллбэк не прошел, нет кнопки, с которой можно вызвать коллбэк.

Tigran Petrosyan 10.04.2022 19:47

Да, действительно странный синтаксис :-)

Raybeck 10.04.2022 20:00
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
2
6
17
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ну, кнопка теряет все свое назначение, если нет функции onClose, я имею в виду, что весь смысл в том, чтобы запустить этот обратный вызов. Поэтому, если обратного вызова нет, не отображайте кнопку.

Да, я думаю, что это так просто, как это. Благодарю вас!

Raybeck 10.04.2022 20:02

Другие вопросы по теме