es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Diseño por página para páginas envueltas con HOC usando TypeScript.

02 Aug, 2023 Programación

Quiero aplicar un diseño a una página como en el siguiente enlace:

https://nextjs.org/docs/basic-features/layouts#per-page-layouts

Pero mi página tiene una diferencia, está envuelta con un HOC, por lo que apliqué “getLayout” al componente de orden superior mismo de esta manera:

PageWithAuth.getLayout

Pero me da este error:

https://i.stack.imgur.com/VVtAR.jpg

La página se ve así:

function TestPage() {
return {
/** Tu contenido */
}
}

const PageWithAuth = withAuth(TestPage);

PageWithAuth.getLayout = function getLayout(page: ReactElement) {
return (
{page}
)
}

export default PageWithAuth;

_app.tsx se ve así:

type NextPageWithLayout = NextPage & {
getLayout?: (page: ReactElement) => ReactNode
}

type AppPropsWithLayout = AppProps & {
Component: NextPageWithLayout
}

export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
// Use the layout defined at the page level, if available
const getLayout = Component.getLayout ?? ((page) => page)

return getLayout()
}

HOC se ve así:

export function withAuth(WrappedComponent: React.ComponentType

) {
const ComponentWithAuth = (props: P) => {
return ;
};
return ComponentWithAuth;
}

¿Cómo puedo solucionarlo?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema es que PageWithAuth no es un React.ComponentType y no tiene una propiedad getLayout por defecto. Para resolver este problema, podemos anotar PageWithAuth como un React.ComponentType utilizando el tipo React.FC y agregarle una propiedad getLayout.

    Aquí tienes un fragmento de código actualizado:

    import { withAuth } from "../path/to/withAuth";

type PageWithAuthProps = {};

const PageWithAuth: React.FC<pagewithauthprops> = withAuth(({ children }) => (
  <>{children}
));

PageWithAuth.getLayout = function getLayout(page: React.ReactElement) {
  return <layout>{page}</layout>;
};

export default PageWithAuth;

    También necesitamos ajustar el tipo de WrappedComponent en el HOC withAuth para que acepte la propiedad getLayout:

    interface WithAuthProps {
  getLayout?: (page: React.ReactElement) => React.ReactNode;
}

export function withAuth<p extends="" withauthprops="">(
  WrappedComponent: React.ComponentType<p>
): React.FC<p> {
  const ComponentWithAuth: React.FC<p> = (props) => {
    return <wrappedcomponent {...props}=""></wrappedcomponent>;
  };
  return ComponentWithAuth;
}

    Ahora podemos usar PageWithAuth en una página:

    import PageWithAuth from "../path/to/PageWithAuth";

function TestPage() {
  return {
    /** Tu contenido */
  }
}

export default PageWithAuth(TestPage);

    Esto nos permitirá usar la propiedad getLayout definida en PageWithAuth.

Comments are closed.