如何通过 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。