[英]Type error when assigning extended NextPage type to a page component
I'm getting the type error on const Page
as seen in the screenshot and code block below.我在
const Page
上收到类型错误,如下面的屏幕截图和代码块所示。
Type '{ (props: Props): JSX.Element; getLayout(page: ReactElement<any, string | JSXElementConstructor<any>>): JSX.Element; }' is not assignable to type 'NextPageWithLayout'.
Type '{ (props: Props): JSX.Element; getLayout(page: ReactElement<any, string | JSXElementConstructor<any>>): JSX.Element; }' is not assignable to type 'FunctionComponent<{}> & { getInitialProps?(context: NextPageContext): {} | Promise<{}>; } & { getLayout?: ((page: ReactElement<any, string | JSXElementConstructor<...>>) => ReactNode) | undefined; }'.
Type '{ (props: Props): JSX.Element; getLayout(page: ReactElement<any, string | JSXElementConstructor<any>>): JSX.Element; }' is not assignable to type 'FunctionComponent<{}>'.
Types of parameters 'props' and 'props' are incompatible.
Property 'pictures' is missing in type '{}' but required in type 'Props'.ts(2322)
galleryssr.tsx(19, 3): 'pictures' is declared here.
The error is saying that NextPageWithLayout
is not accepting getLayout
, but that was working fine before I introduced data fetching with getServerSideProps
and passed props in as an argument.错误是
NextPageWithLayout
不接受getLayout
,但在我介绍使用getServerSideProps
获取数据并将道具作为参数传入之前,它工作正常。
I think I need to update getLayout
or NextPageWithLayout
somehow to accept props, but I can't figure out the syntax.我想我需要以某种方式更新
getLayout
或NextPageWithLayout
以接受道具,但我无法弄清楚语法。
NextLayoutWithPage
is defined in _app.tsx
: NextLayoutWithPage
在_app.tsx
中定义:
export type NextPageWithLayout = NextPage & {
getLayout?: (page: ReactElement) => ReactNode;
};
type AppPropsWithLayout = AppProps & {
Component: NextPageWithLayout;
};
function MyApp({ Component, pageProps }: AppPropsWithLayout) {
const getLayout = Component.getLayout ?? ((page) => page);
return (
<ThemeContextProvider>
{getLayout(<Component {...pageProps} />)}
</ThemeContextProvider>
);
}
export default MyApp;
galleryssr.tsx
import type { ReactElement } from "react";
import { SidebarLayout } from "../layouts/SidebarLayout";
import type { NextPageWithLayout } from "./_app";
import Image from "next/image";
import { GetServerSideProps } from "next";
type Picture = {
id: string;
author: string;
width: number;
height: number;
url: string;
download_url: string;
};
// Define type animals which is an array of objects
type Props = {
pictures: Picture[];
};
const Page: NextPageWithLayout = (props: Props) => {
return (
<div className="w-full text-left">
<h1>This is a server side rendered gallery</h1>
<div className="grid grid-cols-1 grid-gap-4">
{props.pictures.map((picture) => {
return (
<div
className="flex flex-col items-center justify-center bg-base-200 p-4 rounded-md my-4"
key={picture.id}
>
<div className="h-[300px] w-[300px] relative">
<Image
src={picture.download_url}
alt={picture.id}
layout="fill"
objectFit="contain"
width={picture.width / 20}
height={picture.height / 20}
/>
</div>
<div>{picture.author}</div>
</div>
);
})}
</div>
</div>
);
};
Page.getLayout = function getLayout(page: ReactElement) {
return <SidebarLayout>{page}</SidebarLayout>;
};
// This gets called on every request
export const getServerSideProps: GetServerSideProps = async () => {
// Fetch data from external API
const res = await fetch(`https://picsum.photos/v2/list`);
const pictures = await res.json();
return { props: { pictures } };
};
export default Page;
In order to make NextPageWithLayout
also accept the component's props type you can define an optional generic type that you'll pass down to NextPage
.为了使
NextPageWithLayout
也接受组件的 props 类型,您可以定义一个可选的泛型类型,您将传递给NextPage
。
export type NextPageWithLayout<P = {}> = NextPage<P> & {
getLayout?: (page: ReactElement) => ReactNode;
};
You can now define your Page
's type as follows:您现在可以按如下方式定义
Page
的类型:
type Props = {
pictures: Picture[];
};
const Page: NextPageWithLayout<Props> = (props) => {
// Your component's code
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.