如何为指定页面创建父组件以在内部添加React Context？

第一步：创建独立的Context和Provider包装组件 #

新建单独的Context文件（比如FeatureContext.js），把专属逻辑和全局代码解耦：

import { createContext, useContext, useState } from 'react';

// 创建专属Context，不需要在app.js中声明
const FeatureContext = createContext();

// 封装Provider包装组件，后续用它包裹指定页面
export function FeatureProvider({ children }) {
  // 这里定义你需要在指定页面组共享的状态、方法
  const [formData, setFormData] = useState({});
  const [step, setStep] = useState(1);

  const goNextStep = () => setStep(prev => Math.min(prev + 1, 5));
  const resetStatus = () => {
    setFormData({});
    setStep(1);
  };

  return (
    <FeatureContext.Provider 
      value={{
        formData,
        step,
        setFormData,
        goNextStep,
        resetStatus
      }}
    >
      {/* 被包裹的页面都会作为children注入，可访问上述Context数据 */}
      {children}
    </FeatureContext.Provider>
  );
}

// 封装自定义调用Hook，避免后续页面重复写useContext逻辑
export function useFeatureContext() {
  return useContext(FeatureContext);
}

第二步：包裹指定页面组 #

最常用的是在路由层嵌套配置，以React Router v6为例：

// 路由配置文件
import { FeatureProvider } from './FeatureContext';
import Home from './pages/Home';
import About from './pages/About';
import FeaturePage1 from './pages/feature/Page1';
import FeaturePage2 from './pages/feature/Page2';
import FeaturePage3 from './pages/feature/Page3';

function App() {
  return (
    <Routes>
      {/* 不需要该Context的全局页面放在Provider外部 */}
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />

      {/* 需要专属Context的页面组统一用Provider包裹 */}
      <Route path="/feature" element={
        <FeatureProvider>
          <Outlet /> {/* 所有子路由都会被Provider覆盖 */}
        </FeatureProvider>
      }>
        <Route index element={<FeaturePage1 />} />
        <Route path="page2" element={<FeaturePage2 />} />
        <Route path="page3" element={<FeaturePage3 />} />
      </Route>
    </Routes>
  );
}

如果没有使用路由工具，直接手动嵌套组件即可，把需要共享Context的组件放在FeatureProvider标签内部。

第三步：在指定页面调用Context #

直接用封装好的自定义Hook即可获取共享数据：

// 比如FeaturePage2页面
import { useFeatureContext } from '../FeatureContext';

function FeaturePage2() {
  const { formData, step, goNextStep } = useFeatureContext();

  return (
    <div>
      <h2>当前步骤：{step}</h2>
      <p>已填姓名：{formData.name || '-'}</p>
      <button onClick={goNextStep}>进入下一步</button>
    </div>
  );
}

• Context的作用范围严格限制在FeatureProvider包裹的组件内部，不会影响其他页面，也不会增加根组件的渲染负担
• 如果需要在用户离开页面组时清空Context数据，可以在FeatureProvider内部监听卸载事件执行清理逻辑即可

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