反应，是的，Formik。如何从另一个模式扩展当前模式

Question

方案很多，由一些相同的字段组合而成。当更改一个方案的字段时，您需要更改相同的字段，但在其他方案中。我希望不同方案的领域，或者方案本身，引用或继承一个共同的方案。类似于：


    import * as Yup from "yup";
    import {commonSchema} from "./common";

    export const parentSchema = Yup.object().shape({
      FirstName: Yup.string()
        .min(2, `Имя не может состоять менее чем из 2 сомволов`)
        .max(50, `Имя не может состоять более чем из 50 сомволов`)
        .required(`Поле 'Имя' обязательное для заполнения`),
      SecondName: ref(commonSchema.SecondName)
    });


    // commonSchema

    export const commonSchema = Yup.object().shape({
      SecondName: Yup.string()
        .min(2, `Отчество не может состоять менее чем из 2 сомволов`)
        .max(100, `Отчество не может состоять более чем из 100 сомволов`)
    });

简而言之，更改一个通用模式不必更改具有相同字段的其他模式。

我想将所有通用属性收集到一个文件中。然后从每个文件中引用必要的属性

Answer 1

你可以这样做：

const CommonSchema = {
  firstName: Yup.string().required('First name is required')
};

const SchemaWithJustFirstName = Yup.object().shape({
  ...CommonSchema,
});

const SchemaWithSecondName = Yup.object().shape({
  ...CommonSchema,
  secondName: Yup.string().required('Second name is also required')
});

Answer 2

Yup 中最接近模式 extension/inheritance 的是使用 object.shape 根据现有架构创建新架构： Yup documentation

object.shape(fields: object, noSortEdges?: Array<[string, string]>): Schema

Define the keys of the object and the schemas for said keys. Note that you can chain shape method, which acts like object extends

const baseSchema = Yup.object().shape({
   id: string().isRequired(),  
  name: string().isRequired()
})

const someSchema = baseSchema.shape({
   id: number().isRequired(),
   age: number().isRequired()
})

相当于：

const someSchema = Yup.object().shape({
   id: number().isRequired(), // notice how 'id' is overridden by child schema
   name: string().isRequired(),
   age: number().isRequired()
})

另一种方法是使用concat(schema)通过组合两个模式来创建一个新的模式实例：Yup documentation

mixed.concat(schema: Schema): Schema Creates a new instance of the schema by combining two schemas. Only schemas of the same type can be concatenated.

const baseSchema = Yup.object().shape({
   name: string().isRequired()
})

const someSchema = baseSchema.concat(
   Yup.object().shape({
    age: number().isRequired()
}))

// someSchema will be equipped with both `name` and `age` attributes

请注意，concat 仅在两个架构对象具有不同属性或具有完全相同类型的相同属性时才有效。

反应，是的，Formik。如何从另一个模式扩展当前模式

React, Yup, Formik. How to extend current schema from another schema

reactjs

yup

formik