在 react 中应避免直接操作 dom，而应将数据逻辑融入 jsx 渲染过程；通过条件表达式动态绑定 input 的 value 属性，可安全、响应式地控制“正确答案”标识。
React 的核心原则之一是声明式 UI：组件的输出（即渲染结果）应完全由其 props 和 state 决定，而非依赖手动修改 DOM 节点。你原代码中使用 document.getElementsByTagName("input") 并尝试在渲染函数中直接赋值 answersArray[...].value，不仅违反该原则，还会导致以下问题：
- 组件尚未挂载或 DOM 尚未生成时，answersArray 可能为空或长度不足，引发 undefined 错误；
- 即使暂时成功，后续 props 更新时无法自动同步 DOM，破坏 React 的响应式更新机制；
- 多个 <Question /> 实例共享相同 name="q1" 会导致单选逻辑混乱（应为每个题独立命名）。
✅ 正确做法：把“哪个选项是正确答案”的逻辑，提前声明为 props，并在 JSX 中用三元表达式决定每个 radio 的 value。
以下是优化后的 Question 组件示例：
export default function Question({ equation, correctIndex, questionId }) {
// 为每个题目生成唯一 name，避免跨题干扰，例如 "q1", "q2"
const name = `q${questionId}`;
// 所有选项文本（可根据 props 或外部数组传入）
const options = ["4", "3", "5", "2"];
return (
<div>
<p>What is {equation}?</p>
{options.map((text, index) => (
<label key={index} style={{ display: "block", margin: "4px 0" }}>
<input
type="radio"
name={name}
value={index === correctIndex ? "correct" : "incorrect"}
/>
{text}
</label>
))}
<br />
</div>
);
}? 使用方式（在父组件如 Quiz 中）：
<Question equation="2 + 2" correctIndex={0} questionId={1} />
<Question equation="1 + 2" correctIndex={1} questionId={2} />? 进阶建议：
- 使用 useState 在 Quiz 中收集用户选择，再通过 name 属性统一监听（推荐用 onChange + event.target.value）；
- 将 options 提升为 props，实现真正可配置（如 <Question options={["Apple", "Banana"]} correctIndex={1} />）；
- 若需校验答案，可在提交时遍历所有 name 对应的选中项，比对 value === "correct" 即可。
总之：让 props 驱动渲染，而非渲染后去“修补” DOM——这是写出可维护、可预测 React 组件的关键。
