Komponen React-Toastify boleh diguna semula

Question

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.

Answer 1

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"
      })}
    
  );
});