para un diseño persistente, uso la función getLayout en cada página como esta,
import { Layout } from 'hoc'; const Page = () => { return ( <div>hii</div> ); }; Page.getLayout = function getLayout(page: React.ReactNode) { return <Layout>{page}</Layout>; }; export default Page;Ahora quiero pasar algunos datos dinámicos a través de los accesorios en el diseño, y los datos entrarán en el componente de la página a través de una llamada a la API, pero no es posible porque estamos configurando el diseño después de crear el componente de la página.
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;Traté de hacer la solución con contexto, pero mi proveedor debería ser un componente de nivel superior, y para eso, la solución no funciona para este escenario, además, guardar un componente en un estado global no parece una buena idea. Agradezco cualquier tipo de ayuda, gracias de antemano _/\_
puedes hacer esto en el componente de tu página:
Page.getInitialProps = () => { return { data: 'your data', } }y en el componente de diseño:
function getLayout(page) { const { props } = page return ( <YourLayout data={props.data}> {page} </YourLayout> ) }