React跨文件使用useContext遇阻：组件内Context无法导出

步骤1：在组件外部创建Context并定义类型 #

Context需要全局可访问，必须放在App函数外。同时要满足TypeScript的默认值要求，先定义Context的类型，再传入符合类型的默认值：

// 定义Context的类型，包含要共享的状态结构
type GlobalStateType = {
  loading: boolean;
  airports: Airport[];
};

// 创建Context并传入符合类型的默认值，解决TS报错
export const MainContext = createContext<GlobalStateType>({
  loading: false,
  airports: []
});

步骤2：在App组件内用Provider传递实际状态 #

在App里组合需要共享的state，通过MainContext.Provider包裹子组件，把实际状态传给value属性：

function App(){
 const [activeChoice, setActiveChoice] = useState("flights");
 const [overlay, setOverlay] = useState(false);
 const [airports, setAirports] = useState<Airport[]>([]);
 const [loading, setLoading] = useState(false);

 // 组合需要全局共享的状态
 const GlobalState = {
      loading,
      airports,
 };

 return(
   <MainContext.Provider value={GlobalState}>
     {/* 这里放置你的子组件（如路由、页面组件等） */}
   </MainContext.Provider>
  );
}

步骤3：在其他组件中获取共享状态 #

现在可以在任意子组件中导入MainContext，通过useContext获取状态：

import { useContext } from 'react';
import { MainContext } from './App'; // 根据实际文件路径调整

function SomeChildComponent() {
  const { airports, loading } = useContext(MainContext);
  
  return (
    <div>
      {loading ? <p>加载中...</p> : <p>机场总数：{airports.length}</p>}
    </div>
  );
}

核心说明 #

• Context的默认值只是TypeScript要求的占位符，实际运行时会被Provider的value覆盖。
• 只将需要全局共享的状态放入Context，像activeChoice、overlay这类仅App组件内部使用的状态，无需加入Context。

内容的提问来源于stack exchange，提问作者Amos Machora