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;