ReactJS中如何在非嵌套独立组件间传递值？

问题场景 #

现有三个组件：

• Test：内部有状态值x，点击可触发x自增
• Exit：作为网站头部，包含子组件Score
• Score：需要显示Test中的x值

组件渲染结构中，Exit和Test属于路由的不同层级，无法通过嵌套组件的props传递数据，需要实现跨组件的状态共享。

解决方案：使用React Context实现状态共享 #

React Context专门用于解决跨组件层级的状态传递问题，无需通过逐层传递props。

步骤1：创建ScoreContext #

新建ScoreContext.js文件，封装共享状态和操作方法：

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

// 创建Context实例
const ScoreContext = createContext();

// 自定义Provider组件，管理共享状态
export const ScoreProvider = ({ children }) => {
  const [score, setScore] = useState(0);

  // 封装加分方法，使用函数式更新确保状态准确
  const incrementScore = () => {
    setScore(prev => prev + 1);
  };

  // 传递状态和方法给所有子组件
  return (
    <ScoreContext.Provider value={{ score, incrementScore }}>
      {children}
    </ScoreContext.Provider>
  );
};

// 自定义Hook，简化Context消费逻辑
export const useScore = () => {
  const context = useContext(ScoreContext);
  if (!context) {
    throw new Error('useScore必须在ScoreProvider内部使用');
  }
  return context;
};

步骤2：修改Test组件，使用共享的加分方法 #

移除Test内部的独立状态，改用Context提供的incrementScore方法更新共享状态：

import { useScore } from './ScoreContext';

const Test = () => {
  const { incrementScore } = useScore();

  const handleClick = () => {
    incrementScore();
  };

  return (
    <div>
      <div onClick={handleClick} style={{ padding: '20px', backgroundColor: '#ccc', cursor: 'pointer' }}>点击加分</div>
    </div>
  );
};

export default Test;

步骤3：修改Score组件，获取共享状态 #

通过useScore Hook获取共享的score值并显示：

import { useScore } from './ScoreContext';

const Score = () => {
  const { score } = useScore();

  return (
    <div>
      <p style={{ color: "white" }}>YOUR SCORE IS {score}</p>
    </div>
  );
};

export default Score;

步骤4：在顶层组件包裹ScoreProvider #

修改index.js，用ScoreProvider包裹整个路由结构，确保所有需要访问共享状态的组件都能接入Context：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Exit from './Exit';
import Test from './Test';
import { ScoreProvider } from './ScoreContext';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <ScoreProvider>
      <Router>
        <Exit />
        <Routes>
          <Route path='/' element={<Test />} />
        </Routes>
      </Router>
    </ScoreProvider>
  </React.StrictMode>
);

方案说明 #

• 将共享状态从Test组件提升到Context的Provider中，打破了组件层级限制，让任意层级的组件都能访问状态
• 自定义useScore Hook简化了Context的消费流程，同时避免了重复编写useContext代码
• 这种方案适合全局或跨分支的状态共享场景，比如用户信息、主题配置、全局计数器等

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