javascript 可重用的React-Toastify组件

h4cxqtbf 于 2023-04-19 发布在 Java

关注(0)|答案(1)|浏览(130)

我正在尝试创建一个可重用的吐司组件。
代码如下：https://codesandbox.io/s/custom-toastify-toast-with-react-component-forked-mu2l9c?file=/src/Toast.js:146-680
在渲染吐司组件本身 [下面的注解] 时，toast会漂亮地弹出。

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

然而，我试图使用暴露的toastMeta来实现对吐司的调用。这样调用者就可以简单地输入toastMeta.message("please show up..")来获取Toast。同时传递一个可选的参数horizontal和vertical position。

**问题：**无法使用toastMeta.message("")调用吐司组件

注意：此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>
    </>
  );
};

每击一次键后就叫吐司。

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

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

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

创建吐司组件的原因：

用于版本控制，因为它是公共库的组件之一。公共库具有所有UI元素。
非常感谢你的帮助。先谢谢你。

JavaScript

来源：https://stackoverflow.com/questions/76041074/reusable-react-toastify-component

1条答案

按热度按时间

jjhzyzn01#

你不能把一个对象作为一个函数来调用，这也是实现不正确的一个原因，你需要使用吐司的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 (
    <>
      <Toast ref={toastRef} />
      <input
        type="text"
        value={input}
        onChange={(e) => 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 (
    <ToastContainer {...props}>
      {toast.error(toastConfig?.message, {
        position: toastConfig?.position,
        autoClose: 3000,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true,
        progress: undefined,
        theme: "colored"
      })}
    </ToastContainer>
  );
});

赞(0）回复(0）举报 2023-04-19

我来回答

javascript 可重用的React-Toastify组件

1条答案

相关问题

热门标签

最新问答