React非父子组件间数据传递方案咨询（禁用localStorage）

结合你的需求（跨组件共享数据、不使用父子传值/本地存储、不额外添加返回区域标签），React Context API是最适合的轻量方案，它能在无层级依赖的组件间共享状态，完全满足你的限制条件。

实现步骤 #

1. 创建Context模块

新建一个Context文件（比如AuthContext.js），封装状态和更新方法：

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

// 创建Context对象
const AuthContext = createContext();

// 定义Provider组件，负责提供状态
export function AuthProvider({ children }) {
  const [authData, setAuthData] = useState(null);

  return (
    <AuthContext.Provider value={{ authData, setAuthData }}>
      {children}
    </AuthContext.Provider>
  );
}

// 自定义Hook，简化Context的调用
export function useAuth() {
  return useContext(AuthContext);
}

2. 在根组件注入Provider

在项目的根组件（比如App.js）中用AuthProvider包裹所有需要共享数据的组件，这一步不需要在业务组件的返回区域添加额外标签：

import { AuthProvider } from './AuthContext';
import FetchComponent from './FetchComponent'; // 你的fetch数据组件
import TestComponent from './test';

function App() {
  return (
    <AuthProvider>
      <FetchComponent />
      <TestComponent />
      {/* 其他组件 */}
    </AuthProvider>
  );
}

export default App;

3. 在fetch组件中更新Context状态

修改你的数据获取组件，通过自定义Hook更新Context中的状态：

import { useEffect } from 'react';
import { useAuth } from './AuthContext';

function FetchComponent() {
  const { setAuthData } = useAuth();

  useEffect(() => {
    fetch("http://localhost:3001/login")
      .then((res) => res.json())
      .then((data) => {
        setAuthData(data);
        console.log(data);
       });
  }, [setAuthData]);

  // 原有组件返回内容，无需添加额外标签
  return <div>原组件内容</div>;
}

export default FetchComponent;

4. 在test组件中获取共享数据

修改test组件，通过自定义Hook直接获取Context中的数据：

import React from 'react';
import { useAuth } from './AuthContext';

function test() {
  const { authData } = useAuth();

  return (
    <div>
      {authData ? (
        <div>获取到的数据：{JSON.stringify(authData)}</div>
      ) : (
        <div>加载中...</div>
      )}
    </div>
  );
}

export default test;

方案符合要求的原因 #

• 无需父子传值：Context跳过中间组件层级，直接在任意组件间共享状态
• 不依赖localStorage：数据存储在React内存状态中，不会暴露在浏览器本地存储
• 无额外返回区域标签：业务组件的return部分无需添加任何与状态共享相关的标签，仅在根组件统一配置Provider即可

如果你的项目是大型应用，也可以考虑使用Redux Toolkit这类状态管理库，但Context API在轻量场景下更简洁高效，是当前需求的最优解。

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