react-jsonschema-form
的 GitHub中提到的解决方案之一是oneOf
与列出的每种选择组合一起使用。
对于您的情况,看起来像(代码沙箱):
{
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并在那里询问,你可能会得到一些建议。