通过更改其签名来导出react hook

Question

我想更改钩子名称及其返回值，同时导出它们。这是我的用例。我想使用notistack api在我的应用程序中显示一些toast。但是，因为我不喜欢snackbar这个名字，我想把它改成toast。我是这样开始的:

export { SnackbarProvider as ToastProvider, useSnackbar as useToast } from 'notistack';

但是我不能设法改变从useSnackbar钩子返回的变量的名称。

const { enqueueSnackbar, closeSnackbar } = useSnackbar();

应该

const { addToast, closeToast } = useToast();

我怎样才能做到这一点?

谢谢。

Answer 1

您可以定义一个自定义钩子来包装useSnackbar钩子，如下所示:

import { SnackbarProvider, useSnackbar } from 'notistack';
export const useToast = () => {
const { enqueueSnackbar, closeSnackbar } = useSnackbar();
return { addToast: enqueueSnackbar, closeToast: closeSnackbar };
};
export const SnackbarProvider = ToastProvider;

您可以在文档中了解有关构建自定义钩子的更多信息:https://reactjs.org/docs/hooks-custom.html