reactjs - React Material UI 延迟权限对话框

Question

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

我已经检查了 Material Ui docs 中的警报对话框示例这很棒。我正在纠结的是如何:

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)

或者将这个 prop 传递给对话框组件:

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

这两种方法都可以完成。