我正在尝试创建一个可重用的 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 元素。

非常感谢您的帮助。预先感谢您。