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

Question

假设您有一个这样的 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?",
            "type": "string"
        },
        "veggies_eaten":{
            "title": "What kind of veggies did you eat?",
            "type": "string"
        },
        "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，但似乎没有任何效果。我真的很感激一些指点！

Answer 1

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"]
            },
            fruit_eaten: {
              type: "string",
              title: "What kind of fruit did you eat?"
            },
            meats_eaten: {
              type: "string",
              title: "What kind of meat did you eat?"
            }
          }
        },
        {
          properties: {
            food_eaten: {
              const: ["Fruits", "Veggies"]
            },
            fruit_eaten: {
              type: "string",
              title: "What kind of fruit did you eat?"
            },
            veggies_eaten: {
              type: "string",
              title: "What kind of veggies did you eat?"
            }
          }
        },
        {
          properties: {
            food_eaten: {
              const: ["Fruits", "Pastries"]
            },
            fruit_eaten: {
              type: "string",
              title: "What kind of fruit did you eat?"
            },
            pastries_eaten: {
              type: "string",
              title: "What kind of pastries did you eat?"
            }
          }
        },
        {
          properties: {
            food_eaten: {
              const: ["Meats", "Veggies"]
            },
            meats_eaten: {
              type: "string",
              title: "What kind of meats did you eat?"
            },
            veggies_eaten: {
              type: "string",
              title: "What kind of veggies did you eat?"
            }
          }
        },
        {
          properties: {
            food_eaten: {
              const: ["Meats", "Pastries"]
            },
            meats_eaten: {
              type: "string",
              title: "What kind of meats did you eat?"
            },
            pastries_eaten: {
              type: "string",
              title: "What kind of pastries did you eat?"
            }
          }
        },
        {
          properties: {
            food_eaten: {
              const: ["Veggies", "Pastries"]
            },
            veggies_eaten: {
              type: "string",
              title: "What kind of veggies did you eat?"
            },
            pastries_eaten: {
              type: "string",
              title: "What kind of pastries did you eat?"
            }
          }
        },
        {
          properties: {
            food_eaten: {
              const: ["Fruits", "Meats", "Veggies"]
            },
            fruit_eaten: {
              type: "string",
              title: "What kind of fruits did you eat?"
            },
            meats_eaten: {
              type: "string",
              title: "What kind of meats did you eat?"
            },
            veggies_eaten: {
              type: "string",
              title: "What kind of veggies did you eat?"
            }
          }
        },
        {
          properties: {
            food_eaten: {
              const: ["Fruits", "Meats", "Pastries"]
            },
            fruit_eaten: {
              type: "string",
              title: "What kind of fruits did you eat?"
            },
            meats_eaten: {
              type: "string",
              title: "What kind of meats did you eat?"
            },
            pastries_eaten: {
              type: "string",
              title: "What kind of pastries did you eat?"
            }
          }
        },
        {
          properties: {
            food_eaten: {
              const: ["Meats", "Veggies", "Pastries"]
            },
            meats_eaten: {
              type: "string",
              title: "What kind of meats did you eat?"
            },
            veggies_eaten: {
              type: "string",
              title: "What kind of veggies did you eat?"
            },
            pastries_eaten: {
              type: "string",
              title: "What kind of pastries did you eat?"
            }
          }
        },
        {
          properties: {
            food_eaten: {
              const: ["Fruits", "Veggies", "Pastries"]
            },
            fruits_eaten: {
              type: "string",
              title: "What kind of fruits did you eat?"
            },
            veggies_eaten: {
              type: "string",
              title: "What kind of veggies did you eat?"
            },
            pastries_eaten: {
              type: "string",
              title: "What kind of pastries did you eat?"
            }
          }
        },
        {
          properties: {
            food_eaten: {
              const: ["Fruits", "Meats", "Veggies", "Pastries"]
            },
            meats_eaten: {
              type: "string",
              title: "What kind of meats did you eat?"
            },
            fruits_eaten: {
              type: "string",
              title: "What kind of fruits did you eat?"
            },
            veggies_eaten: {
              type: "string",
              title: "What kind of veggies did you eat?"
            },
            pastries_eaten: {
              type: "string",
              title: "What kind of pastries did you eat?"
            }
          }
        }
      ]
    }
  }
}

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