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

Question

我想在导出时更改挂钩名称及其 return 值。这是我的用例。我想使用 notistack api 在我的应用程序中显示一些祝酒词。但是，因为我不喜欢snackbar这个名字，所以我想把它改成toast。以下是我开始这样做的方式：

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

但是我无法更改 return 从 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

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

export react hook by changing its signature

javascript

reactjs

react-hooks

es6-modules

javascript-import