reactjs - Hvordan sende en Nextjs-komponent med egendefinerte egenskaper som Children
For å legge til en egenskap Auth til komponentene mine. Jeg har opprettet et grensesnitt
interface AuthAppProps extends Omit<AppProps, "Component"> {
Component: AppProps["Component"] & { Auth: boolean };
}
Slik at jeg kan prestere
const App: React.FC<AuthAppProps> = (props) =>{
const {
Component,
pageProps: { session, ...pageProps },
} = props;
return (
<SessionProvider session={session}>
{Component.Auth ? (
<AuthGuard>
<Component {...pageProps} />
</AuthGuard>
) : (
<Component {...pageProps} />
)}
</SessionProvider>
);
}
Jeg vil flytte denne sjekklogikken til en annen komponent som er
const AuthProvider: React.FC<AuthProviderProps> = (
props: AuthProviderProps
) => {
const { children: Component } = props;
if (Component.Auth) {
return <AuthGuard>{Component}</AuthGuard>;
} else {
return <>{Component}</>;
}
};
Slik at jeg kan gjøre
<SessionProvider session={session}>
<AuthProvider>
<Component {...pageProps} />
</AuthProvider>
</SessionProvider>
Men siden <Component {...pageProps} /> bare blir sendt som et React-element og ikke som min egendefinerte type, gir det meg en feil som
Type 'Element' is not assignable to type '(NextComponentType<NextPageContext, any, {}> & { Auth: boolean; }) & ReactNode'Hvordan kan jeg få tilgang til Auth for komponenten min når den sendes som barn? Er det mulig?
Oppdater
interface AuthProviderProps{
children: AuthAppProps
}