React如何将App.js中定义的score状态传递到Score.js组件

根据你当前的项目结构，按实现成本从低到高有三种常用方案，可根据组件层级关系选择：

方案1：Props 直接传值（优先推荐） #

适用场景：Score.js是App.js的直接子组件，或两者之间仅隔1层嵌套组件，这是最符合React单向数据流设计、零额外依赖的实现方式。

代码实现 #

1. 在App.js中渲染Score组件时，将score状态作为属性传入：

// App.js
import { useState } from 'react';
import Score from './Score';

function App() {
  const [score, setScore] = useState(0);
  // 其余答题核心逻辑，比如用户答对题目时调用setScore更新分数
  const isQuizFinished = true; // 替换成你项目里判断答题是否完成的状态

  return (
    <div className="quiz-container">
      {/* 答题过程中渲染的题目组件等内容 */}
      {isQuizFinished && <Score finalScore={score} />}
    </div>
  );
}

export default App;

2. 在Score.js中通过组件参数接收传入的分数，直接渲染即可：

// Score.js
export default function Score({ finalScore }) {
  return (
    <div className="score-block">
      <p>本次测验得分：{finalScore}</p>
      {/* 后续邮箱填写、结果发送的相关逻辑 */}
    </div>
  );
}

方案2：Context 跨层传值 #

适用场景：App.js和Score.js之间嵌套了2层及以上的中间组件，逐层传递props会产生大量冗余的透传代码时使用。

代码实现 #

1. 在App.js中创建得分上下文，并用Provider包裹所有子组件：

// App.js
import { useState, createContext } from 'react';
import Score from './Score';
// 创建得分上下文，默认值设为0
export const ScoreContext = createContext(0);

function App() {
  const [score, setScore] = useState(0);
  // 答题核心逻辑...

  return (
    <ScoreContext.Provider value={score}>
      <div className="quiz-container">
        {/* 中间嵌套的任意层级组件，都不需要额外传递score参数 */}
        <QuizPage />
      </div>
    </ScoreContext.Provider>
  );
}

export default App;

2. 在Score.js中通过useContext钩子直接获取上下文中的分数值：

// Score.js
import { useContext } from 'react';
import { ScoreContext } from './App';

export default function Score() {
  const finalScore = useContext(ScoreContext);
  return (
    <div className="score-block">
      <p>本次测验得分：{finalScore}</p>
      {/* 邮箱填写、结果发送逻辑 */}
    </div>
  );
}

方案3：全局状态管理 #

适用场景：项目本身已经接入Redux、Zustand、Jotai等全局状态库，且得分数据需要被多个无嵌套关系的组件（比如结果页、邮件发送模块、答题历史模块）共用时使用。
实现逻辑很简单：把原本定义在App.js中的score状态，迁移到全局store中管理，所有需要用到分数的组件直接从store中订阅取值即可，不需要做组件间的参数传递。

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