react provide/inject 的功能实现的多种方式

// 1. 创建 Context（相当于定义注入的"键"）
const ThemeContext = React.createContext();

// 2. 顶层组件提供数据（类似 provide）
function App() {
  const theme = {
    color: "blue",
    size: "16px"
  };

  return (
    <ThemeContext.Provider value={theme}>
      <ParentComponent />
    </ThemeContext.Provider>
  );
}

// 3. 深层子组件获取数据（类似 inject）
function DeepChild() {
  // 通过 useContext 注入数据
  const theme = React.useContext(ThemeContext);
  
  return (
    <div style={{ color: theme.color, fontSize: theme.size }}>
      我是深层子组件
    </div>
  );
}

// 中间组件无需传递 props
function ParentComponent() {
  return <DeepChild />;
}

// 1. 定义并提供全局状态
import { Provider, useSelector } from 'react-redux';
import store from './store';

function App() {
  return (
    <Provider store={store}>
      <DeepChild />
    </Provider>
  );
}

// 2. 深层组件获取数据
function DeepChild() {
  // 类似 inject 获取全局状态
  const user = useSelector(state => state.user);
  
  return <div>{user.name}</div>;
}

// 封装工具
const { Provider, useContext } = React.createContext();

export function provide(value) {
  return <Provider value={value} />;
}

export function inject() {
  return useContext(Provider);
}

// 使用
function App() {
  return (
    {provide({ appName: "My App" })}
      <DeepChild />
    </Provider>
  );
}

function DeepChild() {
  const config = inject();
  return <div>{config.appName}</div>;
}