如何通过 React props 动态设置表单元素 value 值？

本文共计628个文字，预计阅读时间需要3分钟。

在+%3Ca+style%3D%22color%3A+%3Bfont-size%3A++px%3B%22+href%3D%22%22+target%3D%22_blank%22%3E%3C/a%3E+中，请替换、、和为相应的值。

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 组件的关键。