Tengo un código React que está representando contenido. En este momento, el código contiene duplicación, porque el código debe mostrarse de una manera si contiene botones de llamada a la acción y de otra manera si no hay botones de llamada a la acción en los accesorios. Me piden que intente eliminar la duplicación convirtiendo el código para usar un componente de orden superior (HOC), y no he hecho este tipo de cosas antes en React. ¿Cómo haría para reducir la duplicación usando un HOC?
const hasCtaLinks = ctaLinks && ctaLinks.length > 0 ? true : false; El código anterior es lo que escribí para determinar si el componente debería o no mostrarse usando el bloque de código A o el bloque de código B. En el código a continuación, el leftText se refiere al contenido pasado al componente.
Aquí está el bloque de código A:
{hasCtaLinks && ( <> <LinkComponent className="mds-d-block" type="no-styles" //...other props here > {leftText && ( <InnerComponent content={leftText || ""} /> )} </LinkComponent> <CtaComponent ctaLinks={ctaLinks} /> </> )}Y aquí está el bloque de código B, que se representa si no hay llamadas a la acción en el contenido pasado al componente como accesorio.
{!hasCtaLinks && leftText && ( <InnerComponent content={leftText || ""} /> )}Puede ver que el bloque de código B es solo una duplicación del código que está en el bloque de código A.
Pude resolver este problema sin usar un HOC. Básicamente, solo propagar props.children en un componente condicional, de la siguiente manera:
const ConditionalLink = (props: LinkProps) => { if (!props.href) { return <>{props.children}</>; } return <Link {...props}>{props.children}</Link>; };Y luego reemplazando con en el bloque de código A anterior.