英文:
Reusbale React Toastify Component
问题
A react-toast组件创建的目的是将其发布为私有npm包。它对许多内部项目都很有用。
以下是我的代码：https://codesandbox.io/s/custom-toastify-toast-with-react-component-forked-mu2l9c?file=/src/App.js:297-484
但是遇到了两个问题：
- 单击按钮时，会显示两个toast框。
- 向子组件传递引用。
此外，代码中使用了ref和current.showToast。因此，将refs传递给子组件似乎不太好。
我想要实现的是一次声明，随处使用。
因此，在父组件中：
import {ToastSuccess, ToastSuccessMeta, ToastError, ToastErrorMeta } from 'custom-library'
return(
<>
<ToastSuccess />
<ToastError />
</>
)
在子组件中：
<button onClick={() => ToastSuccessMeta.showToast({ position: "top-right", message: "Custom Success Toast" })}>Show Toast </button>
<button onClick={() => ToastErrorMeta.showToast({ position: "top-right", message: "Custom Error Toast" })}>Show Toast Error</button>
我不知道是否可以实现这一点。请注意，custom-library是Toast-Container将被配置的地方。项目将安装并导入它以使用toast。
感谢您的帮助。
谢谢
英文:
A react-toast component creadted with an intention to publish it as an private npm pacakge. It can usedul for many internal projects.
So, below is my code: https://codesandbox.io/s/custom-toastify-toast-with-react-component-forked-mu2l9c?file=/src/App.js:297-484
However there are two problems encountered
- on Click of buttons, two toast box are being displayed
- Passing down of Ref to child components.
Again, the code uses, ref, current.showToast. So it sounds bad to pass down refs to child Components.
What I want to achieve is DECLARE ONE TIME and USE ANYWHERE.
So, in the parent Component
import {ToastSuccess, ToastSuccessMeta, ToastError, ToastErrorMeta } from 'custom-library'
return(
<>
<ToastSuccess />
<ToastError />
</>
)
In Child components
<button onClick={() => ToastSuccessMeta.showToast({ position: "top-right", message: "Custom Success Toast" })}>Show Toast </button>
<button onClick={() => ToastErrorMeta.showToast({ position: "top-right", message: "Custom Error Toast" })}>Show Toast Erro</button>
I don't know if I can achieve this. Please note that custom-library is the place where Toast-Container will be configured. . And projects will install and import it to use the toast.
Your help is appreciated.
Thank you
答案1
得分: 1
我建议您，而不是创建多个 toast 组件，您可以创建一个通用组件，如下面的代码所示，然后您可以在应用程序的任何地方使用此组件。
import { toast } from "react-toastify";
export default (options) => {
const toastOptions = {
position: options.position,
autoClose: 3000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "colored"
};
switch (options.type) {
case "info":
toast.info(options.message, toastOptions);
break;
case "success":
toast.success(options.message, toastOptions);
break;
case "error":
toast.error(options.message, toastOptions);
break;
case "warning":
toast.warning(options.message, toastOptions);
break;
default:
toast.error("出现了一些问题", toastOptions);
}
};
您可以在您的应用程序的任何地方使用此组件。
英文:
I recommended you, instead of making a multiple toast components you can make a common component as you can see the below code and you can use this component anywhere in your app.
import { toast } from "react-toastify";
export default (options) => {
const toastOptions = {
position: options.position,
autoClose: 3000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "colored"
};
switch (options.type) {
case "info":
toast.info(options.message, toastOptions);
break;
case "success":
toast.success(options.message, toastOptions);
break;
case "error":
toast.error(options.message, toastOptions);
break;
case "warning":
toast.warning(options.message, toastOptions);
break;
default:
toast.error("Something went wrong", toastOptions);
}
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论