如何仅覆盖特定通知的通知配置?

发布于 2025-01-16 19:01:14 字数 1236 浏览 3 评论 0原文

我在 React 应用程序中使用 react-toastify 来发送通知。在其配置中,我设置了默认的 autoClose 设置。有没有办法可以仅针对特定通知覆盖此设置?请在下面找到我当前的代码。


我在索引页面中设置了 react-toastify 默认配置:

import { ToastContainer } from "react-toastify";
<ToastContainer
    closeButton={false}
    autoClose={6000}
/>

在其他页面上,我有以下代码。在这里,我想仅为该特定消息设置 autoClose 的自定义配置。

    Notify({
        message: `A message`,
    });

这使用了一个名为 Notify 的组件:

const User = ({ message, closeToast }) => (
    <div key={0} className="notification">
        <span style={{ backgroundImage: `url('/icons/user.svg')` }}></span>
        <label dangerouslySetInnerHTML={{ __html: message }}></label>
        <button onClick={closeToast}>+</button>
    </div>
);

const Notification = (props) => {
    const { message, user } = props;
    return (
        <div>
            toast(<User message={message} />, {
                className: "white-background",
                bodyClassName: "grow-font-size",
                progressClassName: "fancy-progress-bar",
            })
        </div>
    );
};

I use react-toastify for notifications in my React app. In its configuration I've set a default autoClose setting. Is there a way that I can override this setting for specific notifications only? Please find my current code below.


I set react-toastify default configuration in the index page:

import { ToastContainer } from "react-toastify";
<ToastContainer
    closeButton={false}
    autoClose={6000}
/>

On other pages I for example have the code blow. It's there where I would like to set a custom configuration for autoClose for that specific message only.

    Notify({
        message: `A message`,
    });

This uses a component called Notify:

const User = ({ message, closeToast }) => (
    <div key={0} className="notification">
        <span style={{ backgroundImage: `url('/icons/user.svg')` }}></span>
        <label dangerouslySetInnerHTML={{ __html: message }}></label>
        <button onClick={closeToast}>+</button>
    </div>
);

const Notification = (props) => {
    const { message, user } = props;
    return (
        <div>
            toast(<User message={message} />, {
                className: "white-background",
                bodyClassName: "grow-font-size",
                progressClassName: "fancy-progress-bar",
            })
        </div>
    );
};

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

來不及說愛妳 2025-01-23 19:01:14

根据react-toastify的文档,您可以将 autoClose 属性传递到 toast() 发射器以及 ToastContainer

toast('My message', {autoClose: 5000});

https://fkhadra.github.io/react-toastify/introduction/

According to the documentation for react-toastify, you can pass the autoClose prop into the toast() emitter, as well as the ToastContainer

toast('My message', {autoClose: 5000});

https://fkhadra.github.io/react-toastify/introduction/

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文