如何把react暴露到window上
将 React 组件或方法暴露到全局 window 对象
在开发过程中，有时需要将 React 组件或方法暴露到全局 window 对象，以便其他非 React 脚本或第三方工具调用。以下是几种常见方法：
通过 window 直接挂载
在组件或入口文件中，直接将需要暴露的变量或方法挂载到 window 对象：
// 在组件或入口文件（如 index.js）中
import React from 'react';
import MyComponent from './MyComponent';
// 将组件暴露到 window
window.MyReactComponent = MyComponent;
// 暴露方法
window.myReactFunction = () => {
console.log('Function exposed to window');
};使用 useEffect 在组件中挂载
在函数组件中，通过 useEffect 确保挂载行为在客户端执行（避免 SSR 问题）：
import React, { useEffect } from 'react';
function App() {
useEffect(() => {
window.myAppConfig = {
version: '1.0.0',
init: () => console.log('App initialized'),
};
}, []);
return <div>My App</div>;
}通过 Webpack 的 output.library 配置
如果项目使用 Webpack，可以通过配置将整个模块暴露为全局变量：
// webpack.config.js
module.exports = {
output: {
library: 'MyReactApp', // 全局变量名
libraryTarget: 'window', // 挂载到 window
},
};动态加载后暴露
如果需要按需暴露，可以通过动态加载脚本的方式：
// 动态加载脚本并挂载
const script = document.createElement('script');
script.src = 'path/to/your-component.js';
script.onload = () => {
window.MyComponent = window.MyComponent || {};
};
document.body.appendChild(script);注意事项
-
命名冲突：确保全局变量名唯一，避免与其他库冲突（如使用项目前缀）。
-
类型安全：若使用 TypeScript，需扩展
Window接口声明：declare global { interface Window { MyReactComponent: typeof import('./MyComponent'); } } -
SSR 兼容性：在服务端渲染（SSR）场景中，需检查
window是否存在：if (typeof window !== 'undefined') { window.myVar = 'value'; }
以上方法可根据具体需求选择，推荐优先使用模块化方案，仅在必要时暴露到全局。
