React Material UI 延迟权限对话框

Question

我是 React 和 Material UI 的新手。我想做的是创建一个简单的权限对话框（就像我们通常在手机上看到的要求隐私或位置权限的对话框，或者像桌面上的 Chrome 一样）），该对话框会在加载主页后几秒钟出现。这样用户首先看到主页，然后大约 2 秒后出现权限对话框（如灯箱）。

我已经检查了Material Ui 文档中的警报对话框示例，这很棒。我所困惑的是如何：

1. 在一定延迟（假设 2 秒）后显示对话框
2. 仅显示一次。这意味着您第一次进入主页时会显示它，仅此而已。浏览其他网站的页面就不会再显示它。（类似于 chrome 行为）

我希望能够做这样的事情：

（AlertDialog代码由 Material UI 提供）

export default function Home() {
  return (
    <Container maxWidth="sm">
      <Box component="img" src="/logo.svg" pt="58px" />
      <Typography component="div" gutterBottom>
        Home page
      </Typography>
      <AlertDialog wait="2000" />
    </Container>
  );
}

Answer 1

有两种简单的方法可以实现您想要的：

const [open, setOpen] = React.useState(false)

const openDialog = () => setTimeout(() => setOpen(true),2000)
const closeDialog = () => setOpen(false)

或者将此属性传递给对话框组件：

TransitionProps={{
    style: {
        transitionDelay: 2000,
    }
}}

两种方法都应该可以完成工作。