Tengo un problema con mis campos de formulario y necesito usar FastFields en algunas situaciones y Fields en otras. Por lo tanto, mi FormikControl, una clase para crear entradas de formik, necesita cambiar entre y como envoltorios. No estoy seguro de cómo hacer esto. Aquí hay parte de la clase:
const FormikControl = (props) => { const { name, type, label, disabled, fullWidth, isDynamic, // Field (true) or FastField } = props; const classes = useStyles(); const inputProps = {}; switch (type) { case 'text': return ( <> <ComplexField name={name} isDynamic={isDynamic} {...props}> // meant to be the wrapper that switches {({ field }) => { return ( <TextField {...field} variant="standard" label={label} fullWidth={fullWidth} disabled={disabled} InputLabelProps={{ shrink: true, }} InputProps={inputProps} value={field.value || ''} /> ); }} </ComplexField> <ErrorMessage error name={name} component={FormHelperText} /> </> );ComplexField está destinado a ser el envoltorio flexible y debe poder cambiar entre Field y FastField en función de "isDynamic". Mi mejor intento fue este:
const ComplexField = ({ name, children, isDynamic, ...props }) => { return isDynamic ? ( <Field name={name} props={props}>{({ field }) => children({ ...props, field })}</Field> ) : ( <FastField name={name} props={props}>{({ field }) => children({ ...props, field })}</FastField> ); };No funcionó :(
<ComplexField name={name}>
No estás pasando por ahí el accesorio "isDynamic" ¿Es intencional? Porque así es obvio que no funciona.
<ComplexField name={name} isDynamic={isDynamic}>
Si desea utilizar un patrón mejor, lea los componentes de reacción de procesamiento condicional