React-Toastify元件可重複使用
P粉514458863
P粉514458863 2024-02-03 18:21:39
0
1
402

我正在嘗試建立一個可重複使用的 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 元素。

非常感謝您的幫忙。預先感謝您。

P粉514458863
P粉514458863

全部回覆(1)
P粉090087228

您不能將物件作為函數調用,這也是實現不正確的原因之一,您需要使用 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 (
    
      
       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"
      })}
    
  );
});
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板