Ich versuche, eine wiederverwendbare Toast-Komponente zu erstellen.
Hier ist der Code: https://codesandbox.io/s/custom-toastify-toast-with-react-component-forked-mu2l9c?file=/src/Toast.js:146-680
Beim Rendern der Toast-Komponente selbst [Kommentare unten] wird der Toast wunderschön angezeigt.
return (
<>
{/* <Toast /> */} ---> This one works perfectly.
<input
type="text"
value={input}
onChange={(e) => setInput(e.target.value)}
name="input"
/>
</>
Allerdings versuche ich, den Toast durch die Öffentlichkeit zu erreichen toastMeta 来实现对 toast 的调用。这样调用者只需输入 toastMeta.message("please show up.."). Optionale Parameter horizontale und vertikale Position werden ebenfalls übergeben.
Problem: Kann toastMeta.message("") nicht zum Aufrufen der Toastkomponente verwenden
Hinweis: Bei diesem CustomToast handelt es sich um ein npm-Paket, daher muss der Aufrufer diese Bibliothek installieren und importieren toastMeta.
export const toastMeta = {
position: "top-right",
message: "Error Toast"
};
export const Toast = ({ className, children, ...props }) => {
return (
<>
<ToastContainer {...props}>
{toast.error(toastMeta.message, {
position: toastMeta.position,
autoClose: 3000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "colored"
})}
</ToastContainer>
</>
);
};
Rufen Sie nach jedem Tastendruck Toast an..
const [input, setInput] = useState("");
useEffect(() => {
toastMeta("Error Message..");
}, [input]);
return (
<>
{/* <Toast /> */}
<input
type="text"
value={input}
onChange={(e) => setInput(e.target.value)}
name="input"
/>
Grund für die Erstellung der Toast-Komponente:
Wird zur Versionskontrolle verwendet, da es eine der Komponenten der öffentlichen Bibliothek ist. Die gemeinsame Bibliothek enthält alle UI-Elemente.
Vielen Dank für Ihre Hilfe. Vielen Dank im Voraus.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
您不能将对象作为函数调用，这也是实现不正确的原因之一，您需要使用 toast 的 ref，然后动态传递值。
请检查代码，希望对您有所帮助！
App.js
import React, { useEffect, useRef, useState } from "react"; import { Toast, toastMeta } from "./Toast"; const App = () => { const [input, setInput] = useState(""); const toastRef = useRef(null); useEffect(() => { // toastMeta("Error Message.."); if (input !== "") { toastRef.current.showToast({ position: "top-right", message: "Custom Error Toast" }); } }, [input]); return (Toast.js
import React, { forwardRef, useImperativeHandle, useState } from "react"; import { ToastContainer, toast } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; export const toastMeta = () => { return { position: "top-right", message: "Error Toast" }; }; export const Toast = forwardRef(({ className, children, ...props }, ref) => { const [toastConfig, setToastConfig] = useState({}); useImperativeHandle(ref, () => ({ showToast: (_data) => { setToastConfig(_data); } })); return (
{toast.error(toastConfig?.message, {
position: toastConfig?.position,
autoClose: 3000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "colored"
})}
);
});