0

Realmente no sé si esto sea posible, espero que sí.

Lo que quiero hacer es lo siguiente: Tengo un layout, el cual tiene el típico footer y header, pero también tengo uno llamado PageHeading, el cual tiene un título, como también breadcrums.

Este es el componente PageHeading

Entonces lo que quisiera hacer es poder enviar información a este componente en las páginas en donde lo vaya a utilizar.

Por ejemplo en este caso tengo el siguiente componente que es una vista:

    const Tournament = () => (
        <div class="row">
            <div className="col-md-8">
    <TournamentLive title="Transmisión del torneo" frameUrl="https://player.twitch.tv/?channel=xxx" />
            </div>
            <div className="col-md-4">
                <TournamentInformation />
                <Standings />
            </div>
        </div>
    );
export default Tournament;

Por otra parte, el componente del PageHeading es este:

const PageHeading = () => (
    <div className="page-heading page-heading--horizontal effect-duotone effect-duotone--primary">
            <div className="container">
                <div className="row">
                    <div className="col align-self-start">
                        <h1 className="page-heading__title">Torneo <span className="highlight">#1</span></h1>
                    </div>
                    <div className="col align-self-end">
                        <ol className="page-heading__breadcrumb breadcrumb font-italic">
                            <li className="breadcrumb-item"><a href="_esports_index.html">Directorio</a></li>
                            <li className="breadcrumb-item"><a href="_football_features-shortcodes.html">League of Legends</a></li>
                            <li className="breadcrumb-item active" aria-current="page">Torneo #1</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
);

El layout que tengo es el siguiente:

const Layout = ({ children }) => (
  <React.Fragment>
    <Header />
    <PageHeading  />
    <section className="section--bg1">
        <div className="site-content">
          <div className="container">
          {children}
          </div>
          </div>
          </section>
    <Footer />
  </React.Fragment>
);

El problema es que el PageHeading no lo puedo poner individualmente por componente ya que si lo hago, quedará dentro de un container y no fuera.

introducir la descripción de la imagen aquí

Entonces me gustaría que me den sugerencias para poder resolver esto. Gracias de antemano.

2
  • Que clase de información le quieres enviar? Cambiarle el titulo, por ejemplo? el 4 dic. 2019 a las 20:03
  • Correcto, el titulo @FedericoMadoery
    – ScriptKash
    el 4 dic. 2019 a las 20:05

1 respuesta 1

0

Podes hacer lo siguiente, es la forma mas simple:

const PageHeading = ({tittle}) => (
    <div className="page-heading page-heading--horizontal effect-duotone effect-duotone--primary">
        <div className="container">
            <div className="row">
                <div className="col align-self-start">
                    <h1 className="page-heading__title">{tittle}</h1>
                </div>
                <div className="col align-self-end">
                    <ol className="page-heading__breadcrumb breadcrumb font-italic">
                        <li className="breadcrumb-item"><a href="_esports_index.html">Directorio</a></li>
                        <li className="breadcrumb-item"><a href="_football_features-shortcodes.html">League of
                            Legends</a></li>
                        <li className="breadcrumb-item active" aria-current="page">Torneo #1</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
);


const Layout = ({children}) => {
    // Declaración de una variable de estado que llamaremos "tittle" y su 'setter',
    // con un valor por defecto que trae el children.headerTittle o "defaulTittle"
    // Aqui puede usar el setter para cambiar, sino no haria falta hacer el setter propiamente dicho
     const [tittle, setTittle] = useState( children.headerTittle || 'defaulTittle');

    return (
        <React.Fragment>
            <Header/>
            <PageHeading tittle={tittle}/>
            <section className="section--bg1">
                <div className="site-content">
                    <div className="container">
                        {children}
                    </div>
                </div>
            </section>
            <Footer/>
        </React.Fragment>
    );
};

PD: También podes caer en casos mas complejos como clonar el elemento children y agregarla la función para cambiar el valor del titulo, lo cual requiere un refactor un poco mayor del código, ya que el clonado puede generar comportamientos extraños con esta estructura si lo implementas así sin mas

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.