React Context 实现全局组件注册

来源于GPT4o：https://ai.openaicloud.cn/?inVitecode=EJSTWFZMQE

第一步：创建全局组件上下文 (GlobalComponentProvider)
我们将创建一个 React Context 和 Provider，用于存储和提供全局组件。

// src/context/GlobalComponentProvider.tsx
import React, { createContext, ReactNode, useContext } from "react";
import { Button, Input } from "antd"; // 这里导入你想全局使用的组件// 创建一个 Context 存储全局组件
const GlobalComponentContext = createContext<Record<string, React.ComponentType<any>> | null>(null);interface GlobalComponentProviderProps {children: ReactNode;
}// 创建 Provider 将全局组件注入 Context
export const GlobalComponentProvider = ({ children }: GlobalComponentProviderProps) => {const globalComponents = {Button, // 在此处注册所有你想全局使用的组件Input,};return (<GlobalComponentContext.Provider value={globalComponents}>{children}</GlobalComponentContext.Provider>);
};// 自定义 Hook 用于访问全局组件
export const useGlobalComponents = () => {const context = useContext(GlobalComponentContext);if (!context) {throw new Error("useGlobalComponents must be used within a GlobalComponentProvider");}return context;
};

第二步：在项目入口文件中注入 GlobalComponentProvider
将 GlobalComponentProvider 包裹在应用的最外层组件中（通常在 index.tsx 或 main.tsx 文件中），这样所有子组件都能访问全局组件。

// src/index.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { GlobalComponentProvider } from "./context/GlobalComponentProvider";const root = ReactDOM.createRoot(document.getElementById("root")!);
root.render(<React.StrictMode><GlobalComponentProvider><App /></GlobalComponentProvider></React.StrictMode>
);

第三步：在组件中使用全局组件
通过 useGlobalComponents Hook，可以在任意组件中访问和使用这些全局注册的组件。

// src/App.tsx
import React from "react";
import { useGlobalComponents } from "./context/GlobalComponentProvider";const App = () => {// 使用自定义 Hook 获取全局组件const { Button, Input } = useGlobalComponents();return (<div><h1>Global Components Example</h1><Button type="primary">Click Me</Button><Input placeholder="Type something" /></div>);
};export default App;