使用React构建测验应用程序需要先从需求梳理开始，明确应用要包含的核心功能，再拆分对应的组件，最后通过状态管理和事件处理串联起所有功能。一个基础版的测验应用至少要有题目展示、选项选择、提交答案、得分统计这几个核心模块。
核心功能与组件拆分
首先梳理测验应用的核心功能点：
- 展示当前题目和选项内容
- 支持用户选择单个选项
- 提交答案后判断正误并统计得分
- 切换下一题直到所有题目完成
- 展示最终测验得分结果
根据功能可以拆分出以下几个组件：
QuizApp：根组件，负责整体状态管理和组件组合Question：题目展示组件，接收题目和选项数据并渲染Option：单个选项组件，处理选项的选中状态Score：得分展示组件，在测验结束后渲染最终得分
数据结构设计
首先定义测验题目的数据结构，每个题目对象包含题目内容、选项列表、正确答案这几个字段：
// 测验题目数据
const quizData = [
{
id: 1,
question: "React中用于管理组件内部状态的是哪个API",
options: ["useState", "useEffect", "useContext", "useRef"],
correctAnswer: "useState"
},
{
id: 2,
question: "React组件的生命周期方法中，哪个会在组件挂载完成后执行",
options: ["componentWillMount", "componentDidMount", "shouldComponentUpdate", "componentWillUnmount"],
correctAnswer: "componentDidMount"
},
{
id: 3,
question: "以下哪个不是React的内置Hook",
options: ["useMemo", "useCallback", "useFetch", "useReducer"],
correctAnswer: "useFetch"
}
];
根组件实现
根组件QuizApp需要管理当前题目索引、用户得分、是否完成测验这些全局状态，同时组合其他子组件：
import React, { useState } from "react";
import Question from "./Question";
import Score from "./Score";
// 引入上面的quizData数据
function QuizApp() {
// 当前题目索引
const [currentIndex, setCurrentIndex] = useState(0);
// 用户得分
const [score, setScore] = useState(0);
// 是否完成所有题目
const [isFinished, setIsFinished] = useState(false);
// 处理答案提交
const handleAnswerSubmit = (selectedAnswer) => {
// 判断答案是否正确
if (selectedAnswer === quizData[currentIndex].correctAnswer) {
setScore(score + 1);
}
// 判断是否还有下一题
if (currentIndex + 1 < quizData.length) {
setCurrentIndex(currentIndex + 1);
} else {
setIsFinished(true);
}
};
// 测验完成后重新开始
const handleRestart = () => {
setCurrentIndex(0);
setScore(0);
setIsFinished(false);
};
// 如果测验完成，展示得分组件
if (isFinished) {
return <Score score={score} total={quizData.length} onRestart={handleRestart} />;
}
// 否则展示当前题目
return (
<div className="quiz-app">
<h1>React测验应用</h1>
<div className="progress">
第 {currentIndex + 1} 题 / 共 {quizData.length} 题
</div>
<Question
questionData={quizData[currentIndex]}
onSubmit={handleAnswerSubmit}
/>
</div>
);
}
export default QuizApp;
题目与选项组件实现
Question组件负责渲染题目内容和选项列表，接收题目数据和提交答案的回调函数：
import React from "react";
import Option from "./Option";
function Question({ questionData, onSubmit }) {
// 处理选项选中后提交答案
const handleOptionClick = (option) => {
onSubmit(option);
};
return (
<div className="question-container">
<h2 className="question-text">{questionData.question}</h2>
<div className="options-list">
{questionData.options.map((option, index) => (
<Option
key={index}
optionText={option}
onSelect={handleOptionClick}
/>
))}
</div>
</div>
);
}
export default Question;
Option组件负责渲染单个选项，点击时触发选择回调：
import React from "react";
function Option({ optionText, onSelect }) {
return (
<button className="option-btn" onClick={() => onSelect(optionText)}>
{optionText}
</button>
);
}
export default Option;
得分组件实现
Score组件在测验结束后展示最终得分，同时提供重新开始测验的按钮：
import React from "react";
function Score({ score, total, onRestart }) {
return (
<div className="score-container">
<h2>测验结束</h2>
<p className="score-text">
你的得分是：{score} / {total}
</p>
<p className="score-percent">
正确率：{Math.round((score / total) * 100)}%
</p>
<button className="restart-btn" onClick={onRestart}>
重新开始测验
</button>
</div>
);
}
export default Score;
功能扩展建议
完成基础版本后，还可以为应用添加更多实用功能：
- 添加计时功能，限制每道题的作答时间
- 增加题目分类，允许用户选择不同类别的测验内容
- 添加本地存储，保存用户的测验历史记录
- 优化选项交互，选中后显示正确或错误的反馈样式
通过这些功能的扩展，可以进一步练习React的更多特性，比如使用useEffect处理计时逻辑，使用localStorage实现数据持久化等。