如何以编程方式显示Chakra？

Question

我正在尝试使用Chakra 脉轮-UI组件库以编程方式展示一个React.js Toast，并且很难让它正常工作。Chakra-UI烤面包文档只展示了如何根据按钮单击显示土司，但我想以编程方式显示它--在AJAX调用之后返回的承诺中。我不确定它是否可行，但是我想要一个可以调用的showToast函数来显示它。

我正在将Chakra集成到一个React.js web应用程序中，并且对React.js和Chakra都相当陌生。

更新

下面是一个CodeSandbox，它展示了我正在努力实现的目标：https://codesandbox.io/embed/upbeat-rhodes-9zkii。我在那里有一个按钮，当它被点击时显示吐司，但我想在TODO所在的setTimeout中显示它。

Answer 1

您可以通过使用React的useEffect钩子以编程方式触发吐司。useEffect钩子可以很好地处理任何副作用，例如获取数据或DOM操作。

 const toast = useToast();

  useEffect(() => {
    // Show toast every 5 seconds.
    setInterval(() => {
      toast({
        title: "Current Time.",
        description: `Time ${new Date()}`,
        status: "success",
        duration: 5000,
        isClosable: true
      });
    }, 5000);
  }, []); // Passing in empty array so this will only get called on mount

对于完整的解决方案视图代码沙箱https://codesandbox.io/s/eloquent-knuth-bt5u8?fontsize=14

Answer 2

这是我的解决方案，以防有人绊倒在这条线上：

import { useToast } from "@chakra-ui/react";
import { useState, useEffect } from "react";

export function useToastHook() {
  const [state, setState] = useState(undefined);
  const toast = useToast();

  useEffect(() => {
    if (state) {
      const { message, status } = state;

      toast({
        title: status,
        description: message,
        status: status,
        duration: 3000,
        position: "top",
        isClosable: true,
      });
    }
  }, [state, toast]);

  return [state, setState];
}

使用它就是这样做的(您也可以将newToast传递给任何不在.jsx文件中的函数)：

import { useToastHook } from "../components/Toast";

const App = () => {
  const [state, newToast] = useToastHook();

  const someThingHappens = (message) => {
    newToast({ message: message, status: "error" });
  };

  return (
    <div>
    ......
   </div>
  );
};