如何在react-jsonschema-form中根据下拉选项动态更新schema与uiSchema

这个需求完全可以实现，常见有两种实现方案，可根据业务复杂度选择：

方案1：使用官方内置dependencies规则（无需手动维护状态，适合固定规则场景） #

react-jsonschema-form 原生支持依赖项配置，直接在 schema 中定义字段依赖规则即可实现选中对应选项后自动新增字段，uiSchema 可提前写好所有动态字段的配置，未触发展示时不会生效。
示例代码如下：

// schema 配置示例
const schema = {
  type: "object",
  properties: {
    // 下拉选择字段
    selectType: {
      type: "string",
      title: "选择类型",
      enum: ["default", "withB"]
    },
    a: {
      type: "string",
      title: "原有字段A"
    }
  },
  // 依赖规则配置
  dependencies: {
    selectType: {
      oneOf: [
        // 选中default时，无新增字段
        {
          properties: {
            selectType: { const: "default" }
          }
        },
        // 选中withB时，新增b字段
        {
          properties: {
            selectType: { const: "withB" },
            b: {
              type: "string",
              title: "动态新增字段B"
              // 其他b字段的schema配置
            }
            // 需要多个新增字段直接在此处扩展即可
          }
        }
      ]
    }
  }
}

// uiSchema 提前配置所有字段的样式即可
const uiSchema = {
  selectType: {
    "ui:widget": "select"
  },
  a: {
    // a字段原有配置
  },
  b: {
    "ui:widget": "textarea"
    // b字段的ui配置
  }
}

该方案优势是逻辑全部收敛在schema配置中，无需自己维护状态变更，适合新增字段规则固定的场景；缺点是灵活度有限，不支持动态拉取字段配置等复杂逻辑。

方案2：监听表单值变更手动更新配置（适合复杂动态场景） #

如果你的新增字段规则比较复杂，比如需要根据接口返回动态生成字段、或者多选项叠加新增字段，可直接把schema和uiSchema存在组件状态中，监听下拉框变化手动合并新增配置即可，示例代码如下：

import { useState } from 'react'
import Form from '@rjsf/core'

// 初始基础配置
const BASE_SCHEMA = {
  properties: {
    selectField: {
      type: "string",
      title: "下拉选择",
      enum: ["option1", "option2", "option3"]
    },
    a: {
      type: "string",
      title: "原有字段A"
    }
  }
}
const BASE_UI_SCHEMA = {
  selectField: { "ui:widget": "select" },
  a: { /* a字段原有配置 */ }
}

// 提前配置每个选项对应的新增字段配置，也可以动态从接口获取
const OPTION_ADD_CONFIG = {
  option2: {
    schema: {
      b: { type: "string", title: "新增字段B" },
      c: { type: "number", title: "新增字段C" }
    },
    uiSchema: {
      b: { "ui:widget": "textarea" },
      c: { "ui:widget": "updown" }
    }
  },
  option3: {
    schema: {
      d: { type: "boolean", title: "新增字段D" }
    },
    uiSchema: {
      d: { "ui:widget": "checkbox" }
    }
  }
}

function CustomForm() {
  const [formSchema, setFormSchema] = useState(BASE_SCHEMA)
  const [formUiSchema, setFormUiSchema] = useState(BASE_UI_SCHEMA)

  const handleFormChange = (changeObj) => {
    const selectVal = changeObj.formData.selectField
    // 深拷贝基础配置，避免引用污染
    const newSchema = JSON.parse(JSON.stringify(BASE_SCHEMA))
    const newUiSchema = JSON.parse(JSON.stringify(BASE_UI_SCHEMA))

    // 匹配当前选中选项的新增配置，合并到基础配置中
    if (OPTION_ADD_CONFIG[selectVal]) {
      const { schema: addSchema, uiSchema: addUiSchema } = OPTION_ADD_CONFIG[selectVal]
      newSchema.properties = { ...newSchema.properties, ...addSchema }
      Object.assign(newUiSchema, addUiSchema)
    }

    setFormSchema(newSchema)
    setFormUiSchema(newUiSchema)
  }

  return <Form schema={formSchema} uiSchema={formUiSchema} onChange={handleFormChange} />
}

该方案优势是灵活度极高，可支持任意复杂的动态字段生成逻辑，只需要注意修改配置时做好深拷贝，避免修改原基础配置的引用即可。

内容的提问来源于stack exchange，提问作者Muhammad Bilal Bangash