React Material UI延迟权限对话框

Question

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

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

1. 显示对话框之后一定的延迟（例如2秒）
2. 仅显示一次。就是说，您第一次进入首页时，即会显示。浏览其他站点的页面不会再次显示它。 （类似于Chrome行为）

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

（（材料UI的AlertDialog代码）

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,
    }
}}

这两种方法都应该做。