如何在下一个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;

现在我想通过 Layout 中的 props 传递一些动态数据，这些数据将通过 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',
  }
}

以及布局组件：

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