React useContext能否在不同文件的同级组件间传递值？

当然可以，useContext 的作用范围从来不限于父子组件。只要组件处于同一个 Context Provider 的包裹范围内，不管它们是不是同级组件、是不是在不同文件中，都能共享 Context 中的值。

核心原理 #

Context 的本质是为 React 组件树提供了一个局部全局状态容器——它的作用范围由包裹它的 Provider 决定，和组件的层级结构、所在文件完全无关。只要组件在 Provider 覆盖的组件树内，就能通过 useContext 访问到 Context 的值。

实际代码示例 #

下面是一个跨文件同级组件共享主题状态的例子：

1. 创建 Context 并封装 Provider

新建 ThemeContext.js：

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

// 创建 Context，可设置默认值（非必须）
const ThemeContext = createContext();

// 自定义 Provider 组件，封装状态和操作方法
export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };

  // 将需要共享的状态和方法传入 Provider
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// 自定义 Hook，简化 Context 消费逻辑并做错误校验
export function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme 必须在 ThemeProvider 内部使用');
  }
  return context;
}

2. 同级组件 1：Header.js（不同文件）

import { useTheme } from './ThemeContext';

export default function Header() {
  const { theme, toggleTheme } = useTheme();
  return (
    <header style={{ 
      background: theme === 'light' ? '#fff' : '#333', 
      color: theme === 'light' ? '#333' : '#fff',
      padding: '1rem'
    }}>
      <h2>当前主题：{theme}</h2>
      <button onClick={toggleTheme} style={{ marginTop: '0.5rem' }}>切换主题</button>
    </header>
  );
}

3. 同级组件 2：Content.js（不同文件）

import { useTheme } from './ThemeContext';

export default function Content() {
  const { theme } = useTheme();
  return (
    <main style={{ 
      background: theme === 'light' ? '#f5f5f5' : '#222', 
      color: theme === 'light' ? '#333' : '#fff',
      padding: '2rem',
      marginTop: '1rem'
    }}>
      <p>我是和 Header 同级的 Content 组件，来自不同文件</p>
      <p>当前主题同步：{theme}</p>
    </main>
  );
}

4. 根组件包裹 Provider

在 App.js 中用 Provider 包裹需要共享状态的组件：

import { ThemeProvider } from './ThemeContext';
import Header from './Header';
import Content from './Content';

export default function App() {
  return (
    <ThemeProvider>
      <Header />
      <Content />
    </ThemeProvider>
  );
}

关键注意点 #

• Provider 包裹范围：只有被 Provider 包裹的组件才能访问 Context 值，所以通常会在根组件或需要共享状态的上层组件中使用 Provider。
• 自定义 Hook 优化：用自定义 Hook（如 useTheme）可以避免重复写 useContext，还能强制校验组件是否在 Provider 内部，减少错误。
• 适用场景：Context 适合传递全局通用状态（如主题、用户登录信息、语言设置），避免多层组件间的 props 传递（即“props drilling”）。

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