如何将<Toast />组件注入到任意页面组件中？

核心思路 #

把Toast组件的实例管理逻辑抽离到全局，通过全局调用方法控制显示/隐藏，无需在每个页面组件中引入组件、编写渲染判断逻辑。

React 实现方案 #

1. 封装带全局控制的Toast组件
   利用React.createPortal将Toast挂载到页面根节点（如body），同时维护全局状态：

   import { useState, useEffect, createPortal } from 'react';
   
   // 全局维护Toast状态
   let globalToastState = {
     show: false,
     message: '',
     type: 'info'
   };
   let updateCallbacks = [];
   
   const Toast = () => {
     const [state, setState] = useState(globalToastState);
   
     useEffect(() => {
       updateCallbacks.push(setState);
       return () => {
         updateCallbacks = updateCallbacks.filter(cb => cb !== setState);
       };
     }, []);
   
     if (!state.show) return null;
   
     return createPortal(
       <div className={`toast toast-${state.type}`}>
         {state.message}
       </div>,
       document.body
     );
   };
   
   // 全局调用方法
   window.showToast = (message, type = 'info') => {
     globalToastState = { show: true, message, type };
     updateCallbacks.forEach(cb => cb({...globalToastState}));
     // 自动隐藏
     setTimeout(() => {
       globalToastState.show = false;
       updateCallbacks.forEach(cb => cb({...globalToastState}));
     }, 3000);
   };
   
   export default Toast;
   

2. 全局挂载Toast
   在项目根组件（如App.jsx）中引入并渲染一次Toast组件，之后所有页面直接调用window.showToast('提示内容')即可，无需再处理渲染逻辑。

Vue 实现方案 #

Vue 2

1. 封装Toast组件并创建全局构造器

   <!-- Toast.vue -->
   <template>
     <div v-show="visible" class="toast" :class="`toast-${type}`">
       {{ message }}
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         visible: false,
         message: '',
         type: 'info'
       };
     },
     methods: {
       show(message, type = 'info') {
         this.message = message;
         this.type = type;
         this.visible = true;
         setTimeout(() => {
           this.visible = false;
         }, 3000);
       }
     }
   };
   </script>
   

2. 注册全局方法
   在main.js中：

   import Vue from 'vue';
   import Toast from './components/Toast.vue';
   
   const ToastConstructor = Vue.extend(Toast);
   const instance = new ToastConstructor().$mount(document.createElement('div'));
   document.body.appendChild(instance.$el);
   
   Vue.prototype.$toast = instance.show.bind(instance);
   

   之后在任意页面组件中直接调用this.$toast('提示内容', 'success')即可。

Vue 3

1. 用app.config.globalProperties注册全局方法

   // main.js
   import { createApp } from 'vue';
   import App from './App.vue';
   import Toast from './components/Toast.vue';
   
   const app = createApp(App);
   const ToastInstance = createApp(Toast).mount(document.createElement('div'));
   document.body.appendChild(ToastInstance.$el);
   
   app.config.globalProperties.$toast = (message, type = 'info') => {
     ToastInstance.show(message, type);
   };
   
   app.mount('#app');
   

   也可以用provide/inject在全局提供Toast调用方法，组件中通过inject获取后使用。

关键优势 #

• 无需在每个页面重复引入Toast组件、编写v-if/条件渲染逻辑
• 统一维护Toast的样式、显示时长等全局配置
• 调用方式简洁，大幅降低代码冗余

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