Tengo un componente: Encabezado
const Header =()=> { return( <div> <h1> Top Header </h1> </div>); }Y otros 3 componentes: C1, C2, C3.
Lo que quiero es usar el encabezado del componente como encabezado para los tres componentes, pero con un texto diferente en las etiquetas para cada componente C1, C2, C3.
Intenté pasarlo como accesorios pero no funcionó. por ejemplo, como
const ProductsComponent =()=> { return( <main className="products"> <Header>Products</Header> <div className="content"> </div> </main> ); };¿Cómo puedo hacerlo?
Actualmente no está pasando ningún accesorio a su componente de encabezado, tendría que hacerlo así:
const ProductsComponent =()=> { return( <main className="products"> <Header tag="Products"/> <div className="content"> </div> </main> ); };Entonces su componente de encabezado tendría que verse así:
const Header =(props)=> return( <div> <h1> Top Header </h1> {props.tag} </div>); }O podría destruir las etiquetas de sus accesorios de esta manera:
const Header =({ tag })=> return( <div> <h1> Top Header </h1> {tag} </div>); }Deberías escribir un componente de encabezado como este
const Header =(props)=>{ return(<div> <h1> {props.children || 'Top Header'}</h1> </div>); }