小窝后台全局消息组件

2023-12-28 · 周四开心多云

今天给小窝后台项目增加了全局消息组件,实现与之前我 Vue 3 的版本类似,但有不同的点就是将事件触发换成了回调函数。React 组件挂载时注册一个,离开的时候销毁掉。每次添加一个消息的时候都会执行回调函数,将信息同步到 React 组件上,这样就可以将消息组件挂在顶层,任意子组件随时调用了。

// React 消息组件部分
useEffect(() => {
  const fn = (notice: NoticeItem) => {
    setItems((prevItems) => [...prevItems, notice]);
  };

  addFn(fn);

  return () => {
    removeFn(fn);
  };
}, []);

...

// 其他组件调用
add({
  title: "错误",
  content: `歌曲来源有问题!${err.message}`,
});
Paul

Paul

特立独行的一只前端菜狗。这篇日记编写大概耗时了 4 分钟,内容均为个人原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!如本站内容对你有所帮助的话,不妨 捐助支持 一下?

奇趣音乐盒技术源于 Kico Player
Emmm,这里是歌词君