如何在 SnackbarProvider 的内容中获取变量值答案

【问题标题】：How to get variant value inside content of SnackbarProvider如何在 SnackbarProvider 的内容中获取变量值
【发布时间】：2020-08-14 19:56:32
【问题描述】：

我正在使用notistack 库在我的应用程序中显示snackbar。我想自定义小吃吧的内容。因此使用snackbar 的content 属性。我想知道消息变体是success 或warning 还是error，并基于此设置颜色。吐司。下面是一个沙盒 URL： https://codesandbox.io/s/optimistic-hellman-2gcs0?file=/App.js

如何获取ToastTemplate 中的变量值？

【问题讨论】：

你检查我的答案了吗？能解决问题吗？
没有。它没有解决问题。我想在模板中而不是在 redux 中获得一个变体。请参阅 index.js <SnackbarProvider content=
检查更新

标签： reactjs react-redux material-ui snackbar

【解决方案1】：

在您的 export const enqueueSnackbar = (notification) => { 函数中，您有 notification 对象，它具有您可以使用的 options 和 variant：

export const enqueueSnackbar = (notification) => {
    const key = notification.options && notification.options.key;
    const variant = notification.options && notification.options.variant;
    console.log(variant);

    console.log(notification);
    return {
        type: ENQUEUE_SNACKBAR,
        notification: {
            ...notification,
            key: key || new Date().getTime() + Math.random(),
        },
    };
};

更新

由于您想在SnackbarProvider 中进行变体，您可以传递整个数据（而不仅仅是文本消息）并使用您需要的内容。

export const enqueueSnackbar = notification => {
  const key = notification.options && notification.options.key;
  return {
    type: ENQUEUE_SNACKBAR,
    notification: {
      message: { ...notification },
      // ^ Instead of passing the text - I'm passing the entire object
      key: key || new Date().getTime() + Math.random()
    }
  };
};

在 SnackbarProvider 内部：

<SnackbarProvider
  content={(key, notificationData) => {
    const message = notificationData.message;
    const variant = notificationData.options.variant
    console.log(variant);
    return <ToastTemplate id={key} message={message} />;
  }}
>

在这里查看工作示例：https://codesandbox.io/s/flamboyant-ramanujan-1p7yw?file=/index.js

【讨论】：