如何使用react-toastify在单个toast中展示两种消息？

完全可行，核心思路是复用同一个Toast实例/元素，根据当前收藏状态动态修改显示文本，而非每次点击都创建新的Toast。以下是不同平台的具体实现方式：

Android 实现（Java） #

// 声明全局变量
private Toast favToast;
private boolean isFavorited = false; // 初始未收藏

// 收藏按钮点击事件监听
favoriteButton.setOnClickListener(v -> {
    // 切换收藏状态
    isFavorited = !isFavorited;
    // 根据状态确定提示文本
    String toastText = isFavorited ? "Added to Fav" : "Removed From Fav";
    
    // 复用Toast实例
    if (favToast == null) {
        favToast = Toast.makeText(this, toastText, Toast.LENGTH_SHORT);
    } else {
        favToast.setText(toastText);
    }
    favToast.show();
});

Android 实现（Kotlin） #

// 声明全局变量
private var favToast: Toast? = null
private var isFavorited = false

// 收藏按钮点击事件
favoriteButton.setOnClickListener {
    isFavorited = !isFavorited
    val toastText = if (isFavorited) "Added to Fav" else "Removed From Fav"
    
    // 复用Toast实例，为空则创建
    favToast?.setText(toastText) ?: run {
        favToast = Toast.makeText(this, toastText, Toast.LENGTH_SHORT)
    }
    favToast?.show()
}

Web 前端实现（原生JavaScript） #

先提前在页面中准备Toast容器（或动态创建），通过修改文本和控制显示状态实现复用：

// 动态创建Toast元素
const toast = document.createElement('div');
toast.className = 'toast';
// 设置基础样式
toast.style.cssText = `
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-radius: 4px;
    display: none;
    z-index: 9999;
`;
document.body.appendChild(toast);

let isFavorited = false;
const favoriteBtn = document.getElementById('favorite-btn');

favoriteBtn.addEventListener('click', () => {
    // 切换收藏状态
    isFavorited = !isFavorited;
    // 设置对应提示文本
    toast.textContent = isFavorited ? 'Added to Fav' : 'Removed From Fav';
    // 显示Toast
    toast.style.display = 'block';
    
    // 清理之前的定时器，避免重复触发
    clearTimeout(window.toastTimer);
    // 3秒后隐藏Toast
    window.toastTimer = setTimeout(() => {
        toast.style.display = 'none';
    }, 3000);
});

关键注意点 #

• Android平台：如果Toast正在显示，调用setText()后再show()会重置显示时长，不会出现多个Toast叠加的问题。
• Web平台：务必清理之前的定时器，避免多次点击导致Toast隐藏逻辑混乱。

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