He estado tratando de refactorizar este componente de React y pensando en formas de mantenerlo SECO (no se repita). Entonces, ¿cuál sería la mejor manera de refactorizar este componente de React y mantenerlo SECO?
¿Por qué crees que el componente no está SECO ? Si sus componentes como ScheduleTimeTextSpan son styled-components (que es mi suposición), entonces son solo elementos HTML con estilos precargados, por lo que está bien repetirlos. Lo único que podría ayudarlo a SECAR un poco el componente podría ser refactorizar las secciones de código como:
<ScheduleTimeText> Appointment due: <ScheduleTimeTextSpan> {content.appointmentDue} </ScheduleTimeTextSpan> </ScheduleTimeText>que se repiten, a un componente propio:
const AppointmentDue = ({content}) => ( <ScheduleTimeText> Appointment due: <ScheduleTimeTextSpan> {content.appointmentDue} </ScheduleTimeTextSpan> </ScheduleTimeText> ) y luego llamando: <AppointmentDue content={content} />
Esto ahorrará algunas líneas de texto.