Digamos que tengo un componente de diálogo material ui que representa a los niños:

 export interface DialogProps { open: boolean; title: string; children: React.ReactNode; onCancelClick: (event: React.MouseEvent<HTMLButtonElement>) => void; saveButtonLabel?: string; onSaveClick: (event: React.MouseEvent<HTMLButtonElement>) => void; permissionKey?: string } const Dialog = (props: DialogProps) => { const { children } = props; // takes a key and access level, returns true/false: const { checkPermissions } = useCurrentUser(); <Dialog> <div> {children} </div> <DialogActions> <Button variant="outlined" onClick={props.handleCancelClick}> Cancel </Button> <Button variant="contained" onClick={props.handleSaveClick} > {props.saveButtonLabel ?? Save} </Button> </DialogActions> </Dialog> }

Estoy buscando una manera de iterar sobre todos los niños pasados al cuadro de diálogo y verificar los permisos y establecer un accesorio en ciertos niños según el resultado de la verificación. Por ejemplo, si tienen solo lectura, quiero adjuntar deshabilitado al apoyo de los niños para que el campo no se pueda editar, en lugar de que el usuario del cuadro de diálogo deba verificar los permisos y configurarlo deshabilitado manualmente. Para que el usuario simplemente pase una clave al componente de diálogo y el diálogo compararía esa clave con una función de proveedor de contexto llamada verificarPermisos y un nivel de acceso (por ejemplo, Actualizar).

Algo como:

 React.useEffect(() => { if (props.permissionKey !== undefined) { if (!checkPermission(props.permissionKey, AccessLevel.Update)) { const childs = React.Children.toArray(children); React.Children.map(childs, (child, index) => { // here set disabled on either all the children or even based on // type. ie, if text field then disable. if another, then set some // other prop appropriate to that type. if (typeof child is X) { child.disabled = true; } }); } } },[])

Uso actualmente:

 function MyComponent() { const [readOnly] = React.useState(!checkPermissions("somekey", AccessLevel.Update); <MyDialog open={true} title="My Dialog" permissionKey="someKey" ... > <TextField disabled={readOnly}> {data.someValue} </TextField> ... </MyDialog> }

Nunca he visto esto hecho. ¿Es posible hacer esto dinámicamente?