为什么在 Material UI 对话框组件的三元运算符中使用回调作为条件？

Question

我正在尝试根据文档 this section 重新创建 Material UI 自定义对话框组件，但我不明白为什么要使用回调函数 onClose 条件在 DialogTitle:

中显示 IconButton 组件

<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 回调函数是否有特定的原因或模式？我试图完全删除三元运算符，一切都一样。

Answer 1

好吧，如果没有 onClose 函数，按钮将失去所有用途，我的意思是它的全部意义在于运行该回调。所以如果没有回调就不要显示按钮。

为什么在 Material UI 对话框组件的三元运算符中使用回调作为条件？

Why callback is used as condition in ternary operator for Material UI Dialog component?

javascript

reactjs

material-ui