React Material UI 延迟权限对话框答案

【问题标题】：React Material UI delayed permission dialogReact Material UI 延迟权限对话框
【发布时间】：2020-09-28 20:17:22
【问题描述】：

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

我已经检查了Material Ui docs 中的警报对话框示例，这很棒。我正在努力解决的是如何：

在一定延迟（比如 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>
  );
}

【问题讨论】：

标签： reactjs dialog material-ui react-hooks alert

【解决方案1】：

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

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

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

或者把这个prop传递给对话框组件：

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

这两种方法都应该能胜任。

【讨论】：

您能详细说明一下如何在第一个选项中使用 openDialog/closeDialog 吗？并且，关于第二个选项，您的意思是作为 prop 传递给 AlertDialog 组件或材质 ui Dialog 组件？
到第二种方法中的Dialog组件。第一种方法，很简单，你想在动作发生时打开警报对话框，所以你需要做的是调用openDialog，closeDialog必须作为prop传递给Dialog组件，如onClose={closeDialog}。
仍然存在只运行一次此对话框的问题...您认为如何解决？

【解决方案2】：

最终我这样解决了：

管理对话框的打开/关闭 - 使用 setTimeout 和 useState，类似于上面的建议，但主要区别在于对话框的激活不是由单击按钮触发，而是由第一次渲染主页时的超时触发页。这是由反应钩子'useEffect'控制的，它只激活一次超时。
此外，为了解决每个会话仅显示一次对话框的问题，无论用户浏览哪个页面，我都使用了“sessionStorage”来设置对话框显示标志。

这里是'Home'组件的代码：

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

这是处理超时的“AlertDialog”代码：

export default function LocationAlertDialog() {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    // check if the dialog already displayed
    if (sessionStorage.getItem("ShowAlertDialog") != "false") {
        // wait predefined milliseconds before changing the 'open' state of the dialog
        const delay = setTimeout(() => {
        setOpen(true);
        sessionStorage.setItem("ShowAlertDialog", false);
      }, WAIT_MILLISECONDS_TO_SHOW_DIALOG);
      // Cleanup timeout
      return () => clearTimeout(delay);
    }
  }, []);
 return (
 .......
)
}

【讨论】：