如何在下一个js持久化布局中传递动态道具

Question

对于持久化布局，我在每个页面上使用getLayout函数，

import { Layout } from 'hoc';
const Page = () => {
return (
<div>hii</div>
);
};
Page.getLayout = function getLayout(page: React.ReactNode) {
return <Layout>{page}</Layout>;
};
export default Page;

现在我想通过布局中的道具传递一些动态数据，这些数据将通过API调用进入Page组件，但这是不可能的，因为我们在Page组件制作后设置布局。

import { Layout } from 'hoc';
import { fetchData } from 'api/index';
import { useQuery } from 'react-query';
const Page = () => {
const { data } = useQuery('data', fetchData);
// I want to pass this data to the Layout component
return ( <div>hii</div>);
};
Page.getLayout = function getLayout(page: React.ReactNode) {
return <Layout>{page}</Layout>;
// <Layout data={data}>{page}</Layout>
// this data should come from the Page component and pass through layout
};
export default Page;

我试图使解决方案与上下文，但我的提供者应该是一个顶级的组件，为此，解决方案不适合这种情况下工作，也保存一个组件在全局状态似乎不是一个好主意。我很感激任何帮助，谢谢提前_/ _

Answer 1

你可以在你的页面组件中这样做:

Page.getInitialProps = () => {
return {
data: 'your data',
}
}

和at布局组件:

function getLayout(page) {
const { props } = page
return (
<YourLayout data={props.data}>
{page}
</YourLayout>
)
}