是的，基于 prop 有条件渲染的字段的验证

Question

我正在使用 react-hook-form 并使用 YUP 进行前端验证。我有一个场景，我从后端接收一个道具，并根据该道具我注册我的输入字段。我想在提交表单时按要求标记该字段。但如果我没有收到该道具，该字段应保持可选。

const subscriptionSchema = yup.object().shape({
  premium_subscription: yup.bool(),
  comments: yup.string(),
  keep_your_plan: yup.string().required()
)}

高级订阅密钥是可选的。一旦我们将功能组件传递给 prop，就应该根据需要对其进行验证。在这种情况下，我们如何评估该字段是可选的还是必需的？

Answer 1

我使用三元运算符解决了我的问题，并根据 prop 决定它是可选的还是必需的。

premiumSubscription: isRequired ? yup.string().required()
                                : yup.string().notRequired()

这解决了我的问题。

Answer 2

如果您在组件外部创建架构，您还可以通过将 prop 作为参数传递来使用函数。

 const subscriptionSchema = (isRequired) => {
  return yup.object().shape({
    premium_subscription: isRequired? yup.string().required() : yup.string().notRequired(),
    comments: yup.string(),
    keep_your_plan: yup.string().required(),
  });
};

然后你就可以在你的组件中像这样使用它了

const schema = subscriptionSchema(prop.isRequired)