基于Prop条件渲染字段：如何用Yup实现react-hook-form条件必填验证？

你可以通过两种简单方式实现这个需求，基于后端传入的Prop动态调整premium_subscription字段的验证规则：

方法一：直接根据Prop值生成对应规则 #

这种方式最直观，直接判断Prop是否存在（或是否为true），决定是否给字段添加.required()：

// 假设后端传入的Prop名为requirePremiumSubscription
const subscriptionSchema = yup.object().shape({
  premium_subscription: requirePremiumSubscription 
    ? yup.bool().required('请选择是否开通高级订阅') 
    : yup.bool(),
  comments: yup.string(),
  keep_your_plan: yup.string().required()
});

方法二：使用Yup的when条件验证 #

如果后续需要更复杂的条件判断（比如依赖表单内其他字段），可以用when方法，这里我们基于外部Prop做判断：

const subscriptionSchema = yup.object().shape({
  premium_subscription: yup.bool()
    .when([], {
      // 通过箭头函数获取外部的Prop值
      is: () => requirePremiumSubscription,
      then: schema => schema.required('请选择是否开通高级订阅'),
      otherwise: schema => schema.notRequired()
    }),
  comments: yup.string(),
  keep_your_plan: yup.string().required()
});

额外提示：配合字段渲染逻辑 #

如果Prop不存在时不需要显示这个字段，还可以在组件里做条件渲染，确保用户看不到不需要的输入项：

{requirePremiumSubscription && (
  <div className="form-group">
    <label>是否开通高级订阅</label>
    <input
      type="checkbox"
      {...register('premium_subscription')}
    />
  </div>
)}

内容的提问来源于stack exchange，提问作者Ali Nawaz