如何仅覆盖特定通知的通知配置?
我在 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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
根据react-toastify的文档,您可以将 autoClose 属性传递到 toast() 发射器以及 ToastContainer
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
https://fkhadra.github.io/react-toastify/introduction/