React组件仅触发Swal弹窗却无效果，求正确实现方法

我希望实现一个仅触发Swal弹窗、不返回任何HTML的React组件，编写了如下代码：

export default function AddPaymentNotification() {
  useEffect(() => {
    Swal.fire({
      title: 'text',
      icon: 'warning',
    })
  }, []);
  return <> </>;
}

但该代码仅返回空元素，并未触发弹窗。我知道无需组件也可创建弹窗，但想了解如何正确实现该组件，请问我遗漏了什么？

你的代码逻辑本身没问题，弹窗未触发通常是以下几个原因：

• 未正确引入SweetAlert依赖：先确认已通过npm install sweetalert2或yarn add sweetalert2安装库，并且在组件顶部完成导入：

  import Swal from 'sweetalert2';
  import { useEffect } from 'react';
  

• 组件未被挂载：React组件只有被渲染到DOM中时，useEffect才会执行。如果这个组件没有被父组件引用、未配置到路由里，弹窗代码根本不会运行。
• 浏览器弹窗拦截：部分浏览器会拦截非用户主动触发的自动弹窗（比如页面加载时直接弹出的窗口）。如果是这种情况，要么调整逻辑让弹窗绑定到用户操作（如点击按钮）后触发，要么提示用户允许当前站点的弹窗权限。

另外，返回null比空Fragment更清晰，功能完全一致：

import Swal from 'sweetalert2';
import { useEffect } from 'react';

export default function AddPaymentNotification() {
  useEffect(() => {
    Swal.fire({
      title: 'text',
      icon: 'warning',
    })
  }, []);

  return null;
}

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