• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

203
Vistas
¿Cuál es el mejor enfoque para escribir modales reutilizables en React?

Estoy escribiendo una aplicación en React + Material UI. Hay acciones en diferentes páginas de mi aplicación que usan modales y, en lugar de usar el cuadro de diálogo de Material UI en cada una de estas páginas, he definido un contexto modal global que cambia de estado para mostrar y llena el modal con otros accesorios. Ahora mi pregunta es: ¿cuál es la práctica estándar para renderizar esos accesorios? Como en, ¿en qué punto debo decidir crear un modal/diálogo separado para, digamos, formularios en comparación con acciones simples? ¿O es correcto si uso condiciones para representar cualquier cosa desde dentro de ese Modal? Como ejemplo considere la siguiente muestra:

 <DialogContent> <DialogContentText> {modalTypeDefaults.text} </DialogContentText> <DialogContentText sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: '5px' }}> { (modalTypeDefaults.type === 'user') ? <UserInfoCellComponent displayName={modalProps.displayName} imageURL={modalProps.fkImageIdAvatar} username={modalProps.username.toLowerCase()} /> : (modalTypeDefaults.type === 'post') ? <Box> <Typography>Title: {modalProps.title.toUpperCase()}</Typography> <Typography>Id: {modalProps.id}</Typography> </Box> : (modalTypeDefaults.type === 'event') ? <Box sx={{ alignItems: 'center', display: 'flex' }} > <Avatar src={modalProps.fkImageId} sx={{ mr: 2 }} /> <Typography color="textPrimary" variant="body1" > <a href={modalProps.urlWebsite}>{modalProps.name}</a> </Typography> </Box> : '' } </DialogContentText> </DialogContent>

¿Existen prácticas estándar? Miré a mi alrededor y encontré respuestas extremadamente variables. ¿Qué es mejor para el rendimiento?

almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Un enfoque que he usado antes es envolver todo esto en un Contexto , luego proporcionar ganchos personalizados con useContext() para modificar el estado. De esa manera, puede actualizar los accesorios desde cualquier parte del código.

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda