如何基于拉取数据动态创建React填空题组件及选择最优存储方案

你当前思路里直接存储JSX到数据库的方案确实不推荐，不仅冗余度高、维护成本大，还存在XSS注入的安全风险，更优的实现方案可以遵循「数据与UI分离」的原则设计，具体如下：

1. 数据库存储层：使用纯结构化JSON格式存储题目数据 #

不要存储任何JSX/HTML代码，只需要把题目内容拆分为文本片段和填空配置的组合，示例存储结构：

{
  "questionId": "q_001",
  "segments": [
    {"type": "text", "value": "光合作用的反应式是：CO₂ + H₂O → "},
    {"type": "blank", "blankId": "b1", "correctAnswer": "有机物", "placeholder": "请输入产物", "maxLength": 8, "score": 2},
    {"type": "text", "value": " + O₂，该反应发生在植物细胞的"},
    {"type": "blank", "blankId": "b2", "correctAnswer": "叶绿体", "placeholder": "请输入细胞器", "maxLength": 5, "score": 1}
  ]
}

• 该格式是纯数据结构，没有任何UI相关代码，数据库存储、检索、修改都非常方便
• 支持任意数量、任意位置的填空配置，完全匹配动态生成的需求
• 可以灵活扩展填空的属性：比如校验规则、分数、输入类型（文本/下拉/数字）等，不需要改动存储结构

2. 前端渲染层：开发通用的填空题渲染组件 #

只需要开发1次通用组件，所有填空题复用该组件即可，示例实现代码：

const FillBlankQuestion = ({ questionData, onAnswerChange, userAnswers }) => {
  return (
    <div className="fill-blank-wrap">
      {questionData.segments.map((segment, idx) => {
        // 渲染普通文本片段
        if (segment.type === 'text') {
          return <span key={idx}>{segment.value}</span>
        }
        // 渲染填空输入框
        if (segment.type === 'blank') {
          return (
            <input
              key={segment.blankId}
              type="text"
              placeholder={segment.placeholder}
              maxLength={segment.maxLength}
              value={userAnswers[segment.blankId] || ''}
              onChange={(e) => onAnswerChange(segment.blankId, e.target.value)}
            />
          )
        }
        return null
      })}
    </div>
  )
}

• 组件逻辑完全通用，拉取到数据库里的结构化数据后直接传入组件即可渲染，不需要动态执行JSX
• 后续如果要升级填空样式、增加判题逻辑、支持其他填空类型（如下拉选择填空），只需要修改通用组件的逻辑，所有历史题目自动生效，不需要改动数据库存储的内容

方案核心优势 #

• 安全性高：没有动态执行外部代码的逻辑，完全规避XSS风险
• 维护成本低：题目内容和UI逻辑完全解耦，修改题目不需要改代码，升级UI不需要改数据库数据
• 扩展性强：后续要增加题目属性、扩展题型都只需要在现有结构上做增量修改，兼容性好

如果你已经有存量的JSX格式题目，可以写简单的解析脚本批量转换为上述结构化格式，实现平滑迁移。

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