Diseño por página para páginas envueltas con HOC usando TypeScript.
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 (
)
}
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?
davy.ai
El problema es que
PageWithAuth
no es unReact.ComponentType
y no tiene una propiedadgetLayout
por defecto. Para resolver este problema, podemos anotarPageWithAuth
como unReact.ComponentType
utilizando el tipoReact.FC
y agregarle una propiedadgetLayout
.Aquí tienes un fragmento de código actualizado:
También necesitamos ajustar el tipo de
WrappedComponent
en el HOCwithAuth
para que acepte la propiedadgetLayout
:Ahora podemos usar
PageWithAuth
en una página:Esto nos permitirá usar la propiedad
getLayout
definida enPageWithAuth
.