• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

267
Views
¿Por qué la distribución de propiedades funciona dentro de Grid pero no en FormControl?

Caja de arena aquí: https://codesandbox.io/s/agitated-ardinghelli-fnoj15?file=/src/temp4.tsx:0-1206 .

 import { FormControl, FormControlProps, Grid, GridProps } from "@mui/material"; interface ICustomControlProps { gridProps?: GridProps; formControlProps?: FormControlProps; } const CustomControl = (props: ICustomControlProps) => { return ( <Grid {...props.gridProps}> <FormControl {...props.formControlProps} /> </Grid> ); }; const CustomControlVariant1 = (props: ICustomControlProps) => { return ( <CustomControl /** * Below gridProps is of type GridProps. * It is set to object with some fixed (item, xs, sm, md) properties and spreaded props.gridProps * (which is of type GridProps). * But doing exactly same with formControlProps doesnt work: setting fixed component properties * and spreaded props.formControlProps */ gridProps={{ item: true, xs: 12, sm: 12, md: 12, ...props.gridProps }} formControlProps={{ component: "fieldset", /** ERROR: Type '{ children?: React.ReactNode; classes?: Partial<FormControlClasses> & * Partial<ClassNameMap<never>>; color?: "error" | ... 4 more ... | "warning"; ... * 264 more ...; component: string; }' is not assignable to type 'FormControlProps<"div", {}>'. * Object literal may only specify known properties, and 'component' does not exist in type * 'FormControlProps<"div", {}>'. * * Object literal may only specify known properties, and 'component' * does not exist in type 'FormControlProps<"div", {}>'.ts(2322) */ ...props.formControlProps }} /> ); };

Actualizar

Tenga en cuenta que agregar otro nivel de propagación para FormControl funciona:

 <CustomControl gridProps={{ item: true, xs: 12, sm: 12, md: 12, ...props.gridProps }} // this works!! So, `component` is indeed on `FormControlProps` // which can be confirmed here: https://mui.com/api/form-control/#props formControlProps={{ ...{ component: "fieldset", ...props.formControlProps } }} />

Aquí está el sandbox para este código.

Encuentro que ambos enfoques son lógicamente correctos y, en mi opinión, ambos deberían funcionar, pero no entiendo por qué el primero da un error.

over 3 years ago · Santiago Trujillo
1 answers
Answer question

0

TLDR;

Para hacer feliz a TypeScript, puede modificar ICustomControlProps de la siguiente manera:

 interface ICustomControlProps { gridProps?: GridProps; formControlProps?: FormControlProps & { component: React.ElementType }; }

Explicación

Echemos un vistazo al archivo de declaración de FormControl :

 declare const FormControl: OverridableComponent<FormControlTypeMap>; export type FormControlProps< D extends React.ElementType = FormControlTypeMap['defaultComponent'], P = {}, > = OverrideProps<FormControlTypeMap<P, D>, D>;

De manera concisa, FormControlProps reunirá los accesorios del componente predeterminado (que es un div ; por lo tanto, algunos accesorios que un elemento DOM específico puede tomar) y los accesorios que definen el componente FormControl (estos se pueden encontrar en FormControlTypeMap , por ejemplo, classes , fullWidth , hiddenLabel , etc.).

En FormControlTypeMap seguramente no hay una propiedad de component definida y, por lo tanto, el error. Sin embargo, OverridableComponent<FormControlTypeMap> dice que se acepta recibir un accesorio de component :

 export interface OverridableComponent<M extends OverridableTypeMap> { <C extends React.ElementType>( props: { /** * The component used for the root node. * Either a string to use a HTML element or a component. */ component: C; } & OverrideProps<M, C>, ): JSX.Element; (props: DefaultComponentProps<M>): JSX.Element; }

Entonces, puede usar FormControl de manera segura de esta manera: <FormControl component={...} /> , pero envolviéndolo en otro componente, como este:

 interface ICustomControlProps { gridProps?: GridProps; formControlProps?: FormControlProps; } const CustomControl = (props: ICustomControlProps) => { return ( <Grid {...props.gridProps}> <FormControl {...props.formControlProps} /> </Grid> ); };

requerirá que especifique que también se permite un accesorio de component en ICustomControlProps.formControlProps :

 interface ICustomControlProps { gridProps?: GridProps; formControlProps?: FormControlProps & { component: React.ElementType }; }

En cuanto a por qué esto funciona:

 formControlProps={{ ...{ component: "fieldset", ...props.formControlProps } }}

la respuesta parece estar en este problema , más específicamente en este comentario , que dice que ... crea un subtipo , por lo que todo es válido.

over 3 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error