react-toastify：如何从Toast内部点击按钮关闭自身Toast实例

要实现点击"reject"按钮只关闭当前Toast，核心是利用react-toastify自动传递给自定义组件的内置props，无需手动传递toastId，具体修改如下：

1. 修改自定义CallingToast组件 #

react-toastify会自动向自定义Toast组件注入closeToast（关闭当前Toast的专属方法）和toastId（当前Toast的唯一标识）等props，直接接收并使用即可：

import React from 'react';
import { toast } from 'react-toastify';

export default function CallingToast({ closeToast, toastId }) {
  // 处理reject逻辑，仅关闭当前Toast
  const handleReject = () => {
    // 方式一：使用内置的closeToast方法（推荐，更直接）
    closeToast();
    // 方式二：通过toastId调用dismiss
    // toast.dismiss(toastId);
  };

  // 处理accept逻辑
  const handleAccept = () => {
    // 这里添加你的业务逻辑，比如请求接口等
    closeToast();
  };

  return (
    <>
      <button onClick={handleAccept}>accept</button>
      <button onClick={handleReject}>reject</button>
    </>
  );
}

2. 调用代码无需修改 #

你之前的调用代码保持原样即可，react-toastify会自动完成props的传递：

const toastId = toast(CallingToast, {
  ...toastOptions,
  autoClose: 60000,
  closeButton: false,
  pauseOnHover: false,
  closeOnClick: false,
});

关键说明 #

• 直接调用toast.dismiss()不传参数时，默认会关闭所有Toast，这是react-toastify的默认行为；
• 自定义组件必须接收react-toastify注入的props，才能拿到针对当前Toast的关闭方法或唯一ID，实现单独关闭。

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