【react】管理多个有优先级的弹窗

最新推荐文章于 2025-03-05 15:23:44 发布

Lxq~

最新推荐文章于 2025-03-05 15:23:44 发布

阅读量848

点赞数

文章标签： react.js javascript 前端管理多个有优先级的modal 管理模态框

本文链接：https://blog.youkuaiyun.com/qq_42872073/article/details/125222320

版权

该博客探讨了两种在React中管理多个独立弹框的方案。方案一使用`useCallback`和`useEffect`实现弹框的条件展示，并通过循环执行。方案二利用数组`reduce`方法按顺序执行多个模态。内容涉及状态管理、函数组件和异步操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方案一：适合一次性展示一个弹框，各个弹框没有依赖关系

export default () => {
  const modalBox = useRef(null)
  
   const modal2 = useCallback(async () => {
  }, [])

  const modal1 = useCallback(() => {
    const dom = modalBox.current
    if (a) {
      // 不显示modal
      return Promise.resolve()
    }
    // 显示modal
    return Promise.reject()
  }, [resumeNotPass])

  // 弹框执行函数
  const ModeFun = useCallback(async () => {
    const showModel = [modal1, modal2]
    for (const showModelItem of showModel) {
      try {
        await showModelItem()
      } catch {
        break
      }
    }
  }, [modal1, modal2])

  useEffect(() => {
    ModeFun()
  }, [ModeFun])

  return <div className="modal-box-up" ref={modalBox} />
}```

方案二

const modals = [
  modal1,
  modal2,
  modal3,
  modal4,
];
export default function showModal() {
  modals.reduce((prev, next) => prev.then(next), Promise.resolve(false));
}