多选列表中的动态依赖项？

问题描述

假设你有一个像这样的 JSON 表单模式：

{
    "type": "object","properties": {
        "food_eaten": {
            "type": "array","title": "What kinds of food did you eat today?","items": {
                "type": "string","enum": [
                    "Fruits","Meats","Veggies","Pastries"
                ]
            },"uniqueItems": true
        },"fruit_eaten":{
            "title": "What kind of fruit did you eat?","type": "string"
        },"meats_eaten":{
            "title": "What kind of meats did you eat?","veggies_eaten":{
            "title": "What kind of veggies did you eat?","pastries_eaten":{
            "title": "What kind of pastries did you eat?","type": "string"
        }
    }
}

并且您希望当用户回答“foods_eaten”问题时，只显示相关的“x_eaten”问题。例如。如果用户在“food_eaten”下选择“Meats”和“Veggies”，则只会显示“meats_eaten”和“veggies_eaten”。

我已经完成了我能想到的架构和属性依赖项的所有变体，尝试使用 oneOf 和 anyOf，但似乎没有任何效果。我真的很感激一些指点！

解决方法

react-jsonschema-form's GitHub 中提到的解决方案之一是使用 oneOf 列出列出的每个选项组合。

对于看起来像 (Code Sandbox) 的情况：

{
  type: "object",properties: {
    food_eaten: {
      title: "What kinds of food did you eat today?",type: "array",uniqueItems: true,items: {
        type: "string",enum: ["Fruits","Meats","Veggies","Pastries"]
      }
    }
  },dependencies: {
    food_eaten: {
      oneOf: [
        {
          properties: {
            food_eaten: {
              const: ["Fruits"]
            },fruit_eaten: {
              type: "string",title: "What kind of fruit did you eat?"
            }
          }
        },{
          properties: {
            food_eaten: {
              const: ["Meats"]
            },meats_eaten: {
              type: "string",title: "What kind of meat did you eat?"
            }
          }
        },{
          properties: {
            food_eaten: {
              const: ["Veggies"]
            },veggies_eaten: {
              type: "string",title: "What kind of veggies did you eat?"
            }
          }
        },{
          properties: {
            food_eaten: {
              const: ["Pastries"]
            },pastries_eaten: {
              type: "string",title: "What kind of pastries did you eat?"
            }
          }
        },{
          properties: {
            food_eaten: {
              const: ["Fruits","Meats"]
            },title: "What kind of fruit did you eat?"
            },"Veggies"]
            },"Pastries"]
            },{
          properties: {
            food_eaten: {
              const: ["Meats",title: "What kind of meats did you eat?"
            },{
          properties: {
            food_eaten: {
              const: ["Veggies",title: "What kind of veggies did you eat?"
            },title: "What kind of fruits did you eat?"
            },fruits_eaten: {
              type: "string",title: "What kind of pastries did you eat?"
            }
          }
        }
      ]
    }
  }
}

他们确实提到在实现 allOf 后解决方案可能会变得更简单（现在是这样），因此也许您可以简化这种方法。我建议您加入 RJSF discord 并在那里询问，您可能会得到一些建议。