javascript - 通过更改其签名导出反应钩子

Question

我想在导出它们时更改钩子名称及其返回值。这是我的用例。我想使用notistack api 在我的应用程序中显示一些祝酒词。但是，因为我不喜欢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