Rumah > Soal Jawab > teks badan
Saya cuba mencipta komponen Toast yang boleh diguna semula.
Berikut ialah kod: https://codesandbox.io/s/custom-toastify-toast-with-react-component-forked-mu2l9c?file=/src/Toast.js:146-680
Apabila memaparkan komponen Toast itu sendiri [Komen di bawah], roti bakar akan muncul dengan cantik.
return ( <> {/* <Toast /> */} ---> This one works perfectly. <input type="text" value={input} onChange={(e) => setInput(e.target.value)} name="input" /> </>
Namun, saya cuba mendapatkan Roti Bakar menggunakan orang ramai toastMeta
来实现对 toast 的调用。这样调用者只需输入 toastMeta.message("please show up..")
. Parameter pilihan kedudukan mendatar dan menegak juga diluluskan.
Masalah: Tidak boleh menggunakan toastMeta.message("")
untuk memanggil komponen roti bakar
Nota: CustomToast ini akan menjadi pakej npm, jadi pemanggil mesti memasang perpustakaan ini dan mengimportnya 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> </> ); };
Panggil roti bakar selepas setiap ketukan kekunci..
const [input, setInput] = useState(""); useEffect(() => { toastMeta("Error Message.."); }, [input]); return ( <> {/* <Toast /> */} <input type="text" value={input} onChange={(e) => setInput(e.target.value)} name="input" />
Sebab mencipta komponen Toast:
Digunakan untuk kawalan versi kerana ia adalah salah satu komponen perpustakaan awam. Pustaka biasa mengandungi semua elemen UI.
Terima kasih banyak atas bantuan anda. Terima kasih terlebih dahulu.
P粉0900872282024-02-04 12:50:49
Anda tidak boleh memanggil objek sebagai fungsi, yang merupakan salah satu sebab pelaksanaannya tidak betul, anda perlu menggunakan toast's ref dan kemudian lulus nilai secara dinamik.
Sila semak kod, harap ia membantu!
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 ( <>setInput(e.target.value)} name="input" /> > ); }; export default App;
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" })} ); });