0

我希望从子组件传递架构并组合架构并在主应用程序（父级）上使用它。它基本上是在组件级别的架构，需要从组件合并并在主应用程序中使用。

Component1
const schema =  Yup.object().shape({Name:Yup.string().required()})
const comp1 = () => { 
}
Component2  
const schema =  Yup.object().shape({Age:Yup.string().required()})
const comp2 = () => {
}


<App validationSchmea={mergedSchemas}/>

在应用程序内部，组件存在。

Hoc 将接收 Schema 并将其连接并将其导出到主应用程序（父级） 使用 HoC 导出模式的最佳方法是什么，然后在主应用程序上使用 HoC 从所有组件中获取所有模式。

The Logic to Merge Schemas :



import { emailSchema } from '../components/Email'
import { dateSchema } from '../components/DateofBirth'
import { nameSchema } from '../components/Name'
import { taxIdSchema } from '../components/TaxId'
import { phoneSchema } from '../components/Phone'
import { maritalSchema } from '../components/MartialStatus'
import { citizenSchema } from '../components/CitizenStatus'
import { addressSchema } from '../components/Address'



const mergeSchemas = (...schemas) => {
const [first, ...rest] = schemas;

const merged = rest.reduce(
    (mergedSchemas, schema) => mergedSchemas.concat(schema),
    first
);
return merged;
}

const mergedSchemas = mergeSchemas(emailSchema, dateSchema, nameSchema, 
taxIdSchema, phoneSchema, maritalSchema, citizenSchema, addressSchema)

export default mergedSchemas

我正在寻找从组件级别到顶层使用 Hoc 的最佳实践。有什么建议吗？

4

0 回答 0