0
190
ViewsReact/NextJS pasando tanto niños como otros argumentos al componente
Estoy usando NextJS con un envoltorio PageLayout global para todas mis páginas que establece el encabezado y crea las divisiones de envoltorio para la página. Sin embargo, ahora estoy tratando de establecer una etiqueta de título personalizada para cada página, lo que requiere que pase un argumento al componente PageLayout con el título de la página que quiero establecer. Sin embargo, al intentar pasar los elementos secundarios de PageLayout y el argumento page_title, la propiedad page_title no se pasa.
Esto es lo que tengo para el componente PageLayout:
import Head from 'next/head' import styles from "../../../styles/layout/PageLayout.module.scss" const PageLayout = ({children, page_title}) => { console.log(`-------------------------------------------------------`) console.log(`Page Title: ${page_title}`) console.log('PAGE Children (NEXT LINE):') console.log(children) return ( <div className={styles.container}> <Head> <title>{page_title}</title> <meta name="description" content="JWS Fine Art" /> <link rel="icon" href="/JWS_ICON.png" /> <link rel="preconnect" href="https://fonts.gstatic.com"/> <link href="https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:wght@300&family=Lato:wght@300&display=swap" rel="stylesheet"/> </Head> <main className={styles.main}> {children} </main> </div> ) } export default PageLayout;Y aquí hay un ejemplo de cómo estoy pasando page_title y children para una de mis páginas:
return ( <PageLayout page_title={"Orders"}> <div className={styles.main_container}> <div className={styles.main_body}> <h2 className={styles.module_title}>Order Management:</h2> {page_jsx} </div> </div> </PageLayout> ) Y cuando intento acceder a esa página, veo el siguiente resultado de la consola del registro de PageLayout: 
Habiendo dicho todo esto, me pregunto si no es posible pasar tanto a los niños como a otros argumentos. No he podido encontrar ninguna información sobre este problema en línea, y ningún método que haya probado ha funcionado, así que vengo aquí. ¡Apreciaría mucho cualquier aporte que alguien pueda tener!
1 answers
Answer question0
El problema terminó debido a que intenté usar "título" como un nombre de variable que parece ser un nombre de variable global que no se puede usar, y también debido a que no actualicé el JSX móvil y de escritorio para la página.
La funcionalidad funciona como se esperaba, y puede pasar tanto niños como accesorios adicionales. Gracias a @PrinceAgrawal por hacerme revisar mi trabajo correctamente :P
Para ver un ejemplo práctico de esta funcionalidad, puede ver este repositorio de ejemplo: https://github.com/tsmith165/page_layout_example