反应,是的,福米克。如何从另一个模式扩展当前模式

Вит*_*eam 14 reactjs yup formik

方案有很多种,它们是由一些相同的字段组合而成的。当更改一个方案的字段时,您需要更改其他方案中的相同字段。我希望不同方案的字段或方案本身引用或继承一个通用方案。就像是:

\n
\n    import * as Yup from "yup";\n    import {commonSchema} from "./common";\n\n    export const parentSchema = Yup.object().shape({\n      FirstName: Yup.string()\n        .min(2, `\xd0\x98\xd0\xbc\xd1\x8f \xd0\xbd\xd0\xb5 \xd0\xbc\xd0\xbe\xd0\xb6\xd0\xb5\xd1\x82 \xd1\x81\xd0\xbe\xd1\x81\xd1\x82\xd0\xbe\xd1\x8f\xd1\x82\xd1\x8c \xd0\xbc\xd0\xb5\xd0\xbd\xd0\xb5\xd0\xb5 \xd1\x87\xd0\xb5\xd0\xbc \xd0\xb8\xd0\xb7 2 \xd1\x81\xd0\xbe\xd0\xbc\xd0\xb2\xd0\xbe\xd0\xbb\xd0\xbe\xd0\xb2`)\n        .max(50, `\xd0\x98\xd0\xbc\xd1\x8f \xd0\xbd\xd0\xb5 \xd0\xbc\xd0\xbe\xd0\xb6\xd0\xb5\xd1\x82 \xd1\x81\xd0\xbe\xd1\x81\xd1\x82\xd0\xbe\xd1\x8f\xd1\x82\xd1\x8c \xd0\xb1\xd0\xbe\xd0\xbb\xd0\xb5\xd0\xb5 \xd1\x87\xd0\xb5\xd0\xbc \xd0\xb8\xd0\xb7 50 \xd1\x81\xd0\xbe\xd0\xbc\xd0\xb2\xd0\xbe\xd0\xbb\xd0\xbe\xd0\xb2`)\n        .required(`\xd0\x9f\xd0\xbe\xd0\xbb\xd0\xb5 '\xd0\x98\xd0\xbc\xd1\x8f' \xd0\xbe\xd0\xb1\xd1\x8f\xd0\xb7\xd0\xb0\xd1\x82\xd0\xb5\xd0\xbb\xd1\x8c\xd0\xbd\xd0\xbe\xd0\xb5 \xd0\xb4\xd0\xbb\xd1\x8f \xd0\xb7\xd0\xb0\xd0\xbf\xd0\xbe\xd0\xbb\xd0\xbd\xd0\xb5\xd0\xbd\xd0\xb8\xd1\x8f`),\n      SecondName: ref(commonSchema.SecondName)\n    });\n\n\n    // commonSchema\n\n    export const commonSchema = Yup.object().shape({\n      SecondName: Yup.string()\n        .min(2, `\xd0\x9e\xd1\x82\xd1\x87\xd0\xb5\xd1\x81\xd1\x82\xd0\xb2\xd0\xbe \xd0\xbd\xd0\xb5 \xd0\xbc\xd0\xbe\xd0\xb6\xd0\xb5\xd1\x82 \xd1\x81\xd0\xbe\xd1\x81\xd1\x82\xd0\xbe\xd1\x8f\xd1\x82\xd1\x8c \xd0\xbc\xd0\xb5\xd0\xbd\xd0\xb5\xd0\xb5 \xd1\x87\xd0\xb5\xd0\xbc \xd0\xb8\xd0\xb7 2 \xd1\x81\xd0\xbe\xd0\xbc\xd0\xb2\xd0\xbe\xd0\xbb\xd0\xbe\xd0\xb2`)\n        .max(100, `\xd0\x9e\xd1\x82\xd1\x87\xd0\xb5\xd1\x81\xd1\x82\xd0\xb2\xd0\xbe \xd0\xbd\xd0\xb5 \xd0\xbc\xd0\xbe\xd0\xb6\xd0\xb5\xd1\x82 \xd1\x81\xd0\xbe\xd1\x81\xd1\x82\xd0\xbe\xd1\x8f\xd1\x82\xd1\x8c \xd0\xb1\xd0\xbe\xd0\xbb\xd0\xb5\xd0\xb5 \xd1\x87\xd0\xb5\xd0\xbc \xd0\xb8\xd0\xb7 100 \xd1\x81\xd0\xbe\xd0\xbc\xd0\xb2\xd0\xbe\xd0\xbb\xd0\xbe\xd0\xb2`)\n    });\n
Run Code Online (Sandbox Code Playgroud)\n

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

\n

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

\n

TKf*_*rce 30

Yup 中与模式扩展/继承最接近的是 object.shape基于现有模式创建新模式: Yup 文档

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

定义对象的键和所述键的模式。请注意,您可以链接 shape 方法,其作用类似于对象扩展

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

const someSchema = baseSchema.shape({
   id: number().isRequired(),
   age: number().isRequired()
})
Run Code Online (Sandbox Code Playgroud)

这相当于:

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

另一种方法是concat(schema)通过组合两个模式来创建新的模式实例: 是的文档

mixed.concat(schema: Schema): Schema 通过组合两个架构来创建架构的新实例。只有相同类型的模式才能串联。

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 
Run Code Online (Sandbox Code Playgroud)

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


Has*_*war 5

您可以这样做:

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')
});
Run Code Online (Sandbox Code Playgroud)