如何从React函数组件内部导出Context？

核心思路 #

Context本身可以在组件外部定义，不需要依赖组件内的hook数据。你只需要在组件外部创建Context，然后在组件内部使用Context.Provider包裹子组件，将hook获取的动态数据作为Provider的value传递即可。

具体实现方案 #

方案1：单独文件创建Context（推荐，便于复用） #

1. 创建单独的Context文件，定义并导出Context和便捷的消费hook：

// OrderContext.js
import { createContext, useContext } from 'react';

// 创建Context，初始值设为null（或对应数据类型的默认值）
const OrderContext = createContext(null);

// 自定义hook，简化子组件的Context消费，并添加校验
export const useOrderContext = () => {
  const context = useContext(OrderContext);
  if (!context) {
    throw new Error('useOrderContext 必须在 OrderContext.Provider 内部使用');
  }
  return context;
};

export default OrderContext;

2. 在OrderDetailsView组件中使用Provider传递动态数据：

// OrderDetailsView.jsx
import { useSearchParams } from 'react-router-dom';
import OrderContext, { useOrderContext } from './OrderContext';
import useOrderParams from './useOrderParams';

// 默认导出组件
export default function OrderDetailsView() {
  const [searchParams] = useSearchParams();
  
  // 处理queryParams得到params和extraHeaders
  const params = {
    orderId: searchParams.get('orderId'),
    // 其他需要的参数
  };
  const extraHeaders = {
    'X-User-Token': searchParams.get('token'),
    // 其他额外请求头
  };

  // 调用自定义hook获取业务数据
  const { data, isLoading } = useOrderParams(params, extraHeaders);

  // 用useMemo缓存上下文值，避免不必要的子组件重渲染
  const contextValue = useMemo(() => ({
    data,
    isLoading,
    params,
    extraHeaders
  }), [data, isLoading, params, extraHeaders]);

  return (
    <OrderContext.Provider value={contextValue}>
      {/* 所有需要消费这些数据的子组件都放在Provider内部 */}
      <OrderBasicInfo />
      <OrderItemList />
    </OrderContext.Provider>
  );
}

// 子组件示例：消费Context数据
function OrderBasicInfo() {
  const { data, isLoading } = useOrderContext();
  
  if (isLoading) return <div>加载中...</div>;
  
  return (
    <div>
      <h3>订单ID: {data?.orderId}</h3>
      <p>订单状态: {data?.status}</p>
    </div>
  );
}

方案2：在组件文件内部创建Context #

如果不需要跨文件复用Context，也可以直接在OrderDetailsView的文件内定义Context（注意要放在组件函数外部，避免每次渲染重建Context）：

// OrderDetailsView.jsx
import { createContext, useContext, useMemo } from 'react';
import { useSearchParams } from 'react-router-dom';
import useOrderParams from './useOrderParams';

// 在组件函数外部创建Context
const OrderContext = createContext(null);

// 自定义消费hook
export const useOrderContext = () => {
  const context = useContext(OrderContext);
  if (!context) {
    throw new Error('useOrderContext 必须在 OrderDetailsView 组件内部使用');
  }
  return context;
};

// 默认导出组件
export default function OrderDetailsView() {
  const [searchParams] = useSearchParams();
  
  const params = { orderId: searchParams.get('orderId') };
  const extraHeaders = { 'X-User-Token': searchParams.get('token') };
  
  const { data, isLoading } = useOrderParams(params, extraHeaders);

  const contextValue = useMemo(() => ({
    data,
    isLoading,
    params,
    extraHeaders
  }), [data, isLoading, params, extraHeaders]);

  return (
    <OrderContext.Provider value={contextValue}>
      <OrderItemList />
    </OrderContext.Provider>
  );
}

关键注意事项 #

• 子组件必须位于OrderContext.Provider的包裹范围内，否则useOrderContext会抛出错误（或拿到初始的null值）。
• 用useMemo缓存contextValue，避免组件每次渲染都生成新的对象，导致子组件无意义的重渲染。
• 自定义消费hook可以简化子组件的代码，同时添加校验，防止错误使用Context。

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