如何初始化react-toastify的Toast实例而不触发显示？

你不需要一开始就调用toast('')来初始化实例——这正是导致空Toast直接显示的原因。推荐两种可行方案：

方案一：首次触发时创建实例 #

让ref初始为null，在第一次调用任意alert方法时再创建Toast实例，后续复用该实例更新内容：

import { toast } from 'react-toastify';

const alertToast = React.useRef(null);

const infoAlert = (message) => {
  if (!alertToast.current) {
    alertToast.current = toast(message, {
      type: toast.TYPE.INFO,
      autoClose: 1500,
    });
  } else {
    toast.update(alertToast.current, {
      render: message,
      type: toast.TYPE.INFO,
      autoClose: 1500,
    });
  }
};

const successAlert = () => {
  if (!alertToast.current) {
    alertToast.current = toast('Success!!', {
      type: toast.TYPE.SUCCESS,
      autoClose: 2500,
    });
  } else {
    toast.update(alertToast.current, {
      render: 'Success!!',
      type: toast.TYPE.SUCCESS,
      autoClose: 2500,
    });
  }
};

const errorAlert = (code, message) => {
  const errorMsg = `Error with code: ${code} and message: ${message}`;
  if (!alertToast.current) {
    alertToast.current = toast(errorMsg, {
      type: toast.TYPE.ERROR,
      autoClose: false,
    });
  } else {
    toast.update(alertToast.current, {
      render: errorMsg,
      type: toast.TYPE.ERROR,
      autoClose: false,
    });
  }
};

方案二：初始化隐藏Toast实例 #

如果需要提前创建实例，可利用react-toastify的isVisible参数（需确保版本支持），初始化一个隐藏的空Toast，更新时再设置为可见：

import { toast } from 'react-toastify';

const alertToast = React.useRef(null);

// 初始化隐藏的空Toast，不会在页面显示
alertToast.current = toast('', {
  isVisible: false,
  autoClose: false,
});

const infoAlert = (message) => {
  toast.update(alertToast.current, {
    render: message,
    type: toast.TYPE.INFO,
    autoClose: 1500,
    isVisible: true, // 更新时设为可见
  });
};

const successAlert = () => {
  toast.update(alertToast.current, {
    render: 'Success!!',
    type: toast.TYPE.SUCCESS,
    autoClose: 2500,
    isVisible: true,
  });
};

const errorAlert = (code, message) => {
  toast.update(alertToast.current, {
    render: `Error with code: ${code} and message: ${message}`,
    type: toast.TYPE.ERROR,
    autoClose: false,
    isVisible: true,
  });
};

两种方案都能避免初始化时显示空Toast，同时实现通过同一ref更新不同类型的Toast需求，方案一兼容性更好，方案二更适合需要提前预创建实例的场景。

内容的提问来源于stack exchange，提问作者Raul