我正在嘗試建立一個可重複使用的 Toast 元件。
這裡是程式碼:https://codesandbox.io/s/custom-toastify-toast-with-react-component-forked-mu2l9c?file=/src/Toast.js:146-680
在渲染 Toast 元件本身時[下面有評論],toast 會漂亮地彈出。
return ( <> {/* <Toast /> */} ---> This one works perfectly. <input type="text" value={input} onChange={(e) => setInput(e.target.value)} name="input" /> </>
但是,我正在嘗試使用公開的 toastMeta
來實現對 toast 的呼叫。這樣呼叫者只需輸入 toastMeta.message("please show up..")
即可取得 Toast。也傳遞可選參數水平和垂直位置。
問題:無法使用 toastMeta.message("")
呼叫 toast 元件
注意:此 CustomToast 將是一個 npm 套件,因此呼叫者必須安裝此程式庫並匯入 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> </> ); };
每次擊鍵後呼叫 toast..
const [input, setInput] = useState(""); useEffect(() => { toastMeta("Error Message.."); }, [input]); return ( <> {/* <Toast /> */} <input type="text" value={input} onChange={(e) => setInput(e.target.value)} name="input" />
建立 Toast 元件的原因:
用於版本控制,因為它是公共庫的元件之一。公共庫包含所有 UI 元素。
非常感謝您的幫忙。預先感謝您。
您不能將物件作為函數調用,這也是實現不正確的原因之一,您需要使用 toast 的 ref,然後動態傳遞值。
請檢查程式碼,希望對您有幫助!
App.js
Toast.js