如何创建可重复使用的脉轮 ui toast

Question

我在我的下一个 js 应用程序中使用脉轮用户界面。 在某些事件中，我想在执行某些操作后使用 chakra ui toast 显示通知。
（例如，点击登录后，我会向后端发送请求，并根据结果显示成功或错误提示） 由于此 toast 只能在单击后调用，而不能以编程方式调用，因此我创建了一个函数来执行此操作

import { useToast } from '@chakra-ui/react';
...

export default function SignInPage() {
    const toast = useToast();

    const resultToast = (status, title) => {
    return toast({
      position: "top",
      title: title,
      status: status,
      duration: 3000,
      isClosable: true,
    });

    const handleSubmit = (e) => {
        // talking to backend / database        

        if(success) {
            resultToast("success", "sign in successful");
        }
        else {
            resultToast("error", "sign in failed");
        }      
    }

    // sign in form
  };
}

这完全没问题，但问题是我想在多个页面上使用它，并想让它可重用，但问题是：

• 我不能让它成为一个 jsx 组件，因为它只返回 toast 元素并且只在点击时被调用。
• 而且我不能在单独的文件中使它成为一个普通函数，因为它使用来自 chakra ui 的 useToast 钩子，它不能在一个函数中使用（或者我错了）。
• 并且也无法从一个文件导出 resultToast 函数，它显示 “修饰符不能出现在这里”

因为我正在使用 chakra ui，所以不想安装任何其他 toast 库。那么有什么方法可以使它可重用，或者我将不得不使用任何外部库或将函数复制粘贴到所有页面上：D

Answer 1

不知道你有没有想过这个问题，但我今天遇到了同样的问题，下面是我用 Chakra-UI 解决它的方法。创建一个单独的函数并编写这样的逻辑......

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

export const CustomToast = () => {
    const toast = useToast();
    // types are: "success", "info", "warning", "error"

    const addToast = (newRes) => {
        toast({
            description:newRes.message, 
            status: newRes.type, 
            position:"top-right", 
            isClosable: true, 
            duration: 5000,
            variant: 'left-accent' 
        })
    }
    
    return { addToast };
}

然后在您的应用程序中的任何位置导入

addToast

方法

import { addToast } from "../path/to/file";

，创建一个实例

const { addToast } = CustomToast();

并通过将一个解构对象传递给addToast函数来使用它

addToast({message: "sign in successful", type: "success"})

...我希望这可以帮助其他人。

Answer 2

您可以使用 react-universal-flash 库在 nextjs 页面上闪烁通知。

只需将 Flasher 添加到 _app.js

import { ChakraProvider} from "@chakra-ui/react";
import { Flasher } from "react-universal-flash";
import Message from "./Message";

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <Flasher>
        <Message />
      </Flasher>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

chakra-ui 的 Codesandbox 示例以及 react-universal-flash 如下

react-universal-flash + chakra-ui

Answer 3

这是我的解决方案：我确实制作了一个对象并使用了它：

const defaultToastProps = {
 position: "top-right" as ToastPosition,
 duration: 2000,
 isClosable: true,
};

const submitHandler = () => {
 Axios.post("/user/register", formData)
   .then((res) => {
     console.log(res);
     toast({
       title: "Account created.",
       description: "We've created your account for you.",
       status: "success",
       ...defaultToastProps,
     });
     nav("/login");
   })
   .catch((err) => {
     if (err.response) {
       console.log(err.response.data.message);
       toast({
         title: "Something went wrong.",
         description: err.response.data.message,
         status: "error",
         ...defaultToastProps,
       });
     } else {
       console.log(err);
       toast({
         title: "Something went wrong.",
         description: "server-error",
         status: "error",
         ...defaultToastProps,
       });
     }
   });
};

Answer 4

你可以像这样使用react context Api，

import { useToast } from '@chakra-ui/react'
import { createContext, useContext} from 'react'
const chatContext = createContext()

const ChatState = ({ children }) => {
    const toast = useToast()
   const Toast = (title, description, status, duration, position = 'top') => {
        return toast({
            title: title,
            description: description,
            status: status,
            duration: duration,
            isClosable: true,
            position: position,
        })
    }
 return (
        <chatContext.Provider value={{ Toast }}>{children}</chatContext.Provider>
    )
export const UseContextAPI = () => {
    return useContext(chatContext)
}
export default ChatState 

我是初学者，所以如果我在这里做错了什么，请指正我。