Encontré los siguientes dos enfoques de diseño de formularios en la documentación de formulario de reacción.
Cuando construimos formularios, hay momentos en que nuestra entrada vive dentro de árboles de componentes profundamente anidados, y ahí es cuando FormContext resulta útil. Sin embargo, podemos mejorar aún más la experiencia del desarrollador creando un componente ConnectForm y aprovechando los renderProps de React. El beneficio es que puede conectar su entrada con React Hook Form mucho más fácilmente.
export const ConnectForm = ({ children }) => { const methods = useFormContext(); return children({ ...methods }); }; export const DeepNest = () => ( <ConnectForm> {({ register }) => <input {...register("deepNestedInput")} />} </ConnectForm> ); export const App = () => { const methods = useForm(); return ( <FormProvider {...methods} > <form> <DeepNest /> </form> </FormProvider> ); }
De alguna manera, no puedo entender cómo esto "mejora la experiencia del desarrollador". Sin ConnectForm , habríamos requerido solo dos líneas que están dentro de ConnectForm en el ejemplo anterior. Pero con ConnectForm , requerimos líneas adicionales para definir ConnectForm y dos líneas adicionales para <ConnectForm>','</ConnectForm> . Así que el número de líneas ha aumentado.
Supongo que no entiendo la idea del ejemplo anterior, y tal vez para una forma más compleja o grande, podría resultar en una menor cantidad de líneas. Q1. ¿Es tan?
Q2. ¿O es que el documento quiere decir " <ConnectForm>...</ConnectForm> se ve más elegante" al "mejorar la experiencia del desarrollador"?