跨项目组件能否使用React useContext？依赖组件上下文访问问题

不是因为组件来自不同项目导致的，核心问题是你的代码里C2使用的context和C1中创建的context并非同一个实例——React Context是通过实例引用而非名称来匹配Provider和Consumer的，和组件是否跨项目没有直接关联。

具体原因 #

你在P1项目里创建了context实例，但P2项目的C2组件里要么根本没导入这个实例，要么自己重新定义了一个同名的context——这两个是完全独立的对象，所以useContext自然拿不到Provider提供的值。

解决办法 #

要让跨项目的组件共享Context，必须保证Provider和Consumer使用同一个Context实例，以下是几种可行方案：

1. 抽离Context到公共依赖包

把Context的定义单独放到一个独立的npm包（比如shared-react-contexts），让P1和P2都依赖这个包：

// 公共包中定义Context
import React from 'react';
export const CallbackContext = React.createContext(null);

在P1的C1中使用Provider：

import { CallbackContext } from 'shared-react-contexts';
import C2 from 'p2';

const C1 = () => {
  const callbacks = {
    onSubmit: () => console.log('提交'),
    onCancel: () => console.log('取消')
  };

  return (
    <CallbackContext.Provider value={callbacks}>
      <C2 />
    </CallbackContext.Provider>
  );
};

在P2的C2中导入同一个Context实例：

import { useContext } from 'react';
import { CallbackContext } from 'shared-react-contexts';

const C2 = () => {
  const { onSubmit, onCancel } = useContext(CallbackContext);
  return (
    <div>
      <button onClick={onSubmit}>提交</button>
      <button onClick={onCancel}>取消</button>
    </div>
  );
};

2. 将Context作为props传递给C2

如果不想额外维护公共包，可以在P1里把Context实例作为props传给C2：

// P1的C1组件
const context = React.createContext(null);

const C1 = () => {
  const callbacks = { /* ... */ };
  return (
    <context.Provider value={callbacks}>
      <C2 context={context} />
    </context.Provider>
  );
};

// P2的C2组件
const C2 = ({ context }) => {
  const callbacks = useContext(context);
  return <div>{/* 使用回调 */}</div>;
};

这种方式适合临时场景，但不够优雅，因为需要组件显式接收Context参数。

3. 直接传递回调props（更简单的替代方案）

如果只是传递多个回调函数，其实直接通过props传递可能更直观，避免Context的复杂度：

// P1的C1组件
import C2 from 'p2';

const C1 = () => {
  const handleSubmit = () => { /* ... */ };
  const handleCancel = () => { /* ... */ };

  return <C2 onSubmit={handleSubmit} onCancel={handleCancel} />;
};

// P2的C2组件
const C2 = ({ onSubmit, onCancel }) => {
  return (
    <div>
      <button onClick={onSubmit}>提交</button>
      <button onClick={onCancel}>取消</button>
    </div>
  );
};

关键总结 #

React Context的生效只看实例是否一致，和组件所在项目无关。只要Provider和Consumer引用的是同一个Context实例，哪怕跨多个npm包也能正常工作。

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