Les composants React-Toastify sont réutilisables

Question

J'essaie de créer un composant Toast réutilisable.

Voici le code : https://codesandbox.io/s/custom-toastify-toast-with-react-component-forked-mu2l9c?file=/src/Toast.js:146-680

Lors du rendu du composant Toast lui-même [Commentaires ci-dessous], le toast apparaîtra magnifiquement.

return (
    <>
      {/* <Toast /> */}   ---> This one works perfectly.
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        name="input"
      />
    </>

Cependant, j'essaie de faire connaître le Toast au public toastMeta 来实现对 toast 的调用。这样调用者只需输入 toastMeta.message("please show up.."). Les paramètres facultatifs de position horizontale et verticale sont également transmis.

Problème : Impossible d'utiliser toastMeta.message("") pour appeler le composant toast

Remarque : ce CustomToast sera un package npm, l'appelant doit donc installer cette bibliothèque et l'importer 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>
    </>
  );
};

Appelez Toast après chaque frappe..

const [input, setInput] = useState("");

  useEffect(() => {
    toastMeta("Error Message..");
  }, [input]);

  return (
    <>
      {/* <Toast /> */}
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        name="input"
      />

Raison de la création du composant Toast :

Utilisé pour le contrôle de version car c'est l'un des composants de la bibliothèque publique. La bibliothèque commune contient tous les éléments de l'interface utilisateur.

Merci beaucoup pour votre aide. Merci d'avance.

Answer 1

Vous ne pouvez pas appeler l'objet en tant que fonction, ce qui est l'une des raisons pour lesquelles l'implémentation est incorrecte, vous devez utiliser la ref de toast puis transmettre la valeur dynamiquement.

Veuillez vérifier le code, j'espère que cela vous aidera !

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