1

假设您有一个这样的 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,但似乎没有任何效果。我真的很感激一些指示!

4

1 回答 1

1

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并在那里询问,你可能会得到一些建议。

于 2021-06-11T23:56:45.310 回答