Reactjs Snackbar 可自行显示进度

Question

我学习 React JavaScript，并希望有一个可以在显示进度时显示进度的小吃栏。就像 Snackbar 一样，像往常一样从爱人左边滑出，并立即开始显示％进度，让我们说一些下载。

我尝试了notistack，但它需要再次显示小吃栏并显示新进度，但我想在一个小吃栏上显示进度

下面是 notistack 示例。每次我单击按钮时，

onClick()

都会再次显示带有增量的

xc

的小吃栏，当我希望在同一小吃栏上显示

xc

增量时不再弹出

let xc = 0;

function onClick() {
    xc += 1;
    enqueueSnackbar({
        message: xc,
        preventDuplicate: false,
        options: {
            key: 'item.name',
            variant: 'success',
            //  action: key => <Button onClick={() => closeSnackbar(key)}>dismiss me</Button>,
        },
    });
}

我研究了很多 Snackbars，比如
材料用户界面
注意堆栈
material-ui-snackbar-provider

如果可能的话，或者是否有一些库可以做到这一点，任何人都可以给出一些提示。最好有一些 Redux 支持的 lib

Answer 1

您可以按照文档指出的方式编写自定义变体。 在 Snackbar 底部添加 进度条 可能会满足您的需求：D

Answer 2

react-toastify

开箱即用，非常轻松地支持此功能，并且在文档中有一整页专门介绍此用例：https://fkhadra.github.io/react-toastify/update-toast。

注意堆栈

据我所知，你不能真正用

notistack

做到这一点。虽然您可以传入

key

并使用

preventDuplicate: true

确保它仅显示带有密钥的每条消息之一，但如果您尝试在已存在的密钥上调用

enqueueSnackbar

，您将看不到更新，除非您先在该键上手动调用

closeSnackbar(key)

将其关闭，然后等待 UI 更新，然后再次调用

enqueueSnackbar()

。我有一个 CodeSandbox 演示了这一点。

这几乎肯定不是您正在寻找的。

注意：如果你不想预先确定一个

key

，你可以直接使用

enqueueSnackbar()

的返回值，如果你没有在options参数中指定，它将是一个随机生成的密钥。