1

Tenho um componente chamado Header e desejo reaproveitá-lo em mais algumas páginas. Quando faço o import Header from './Header' e chamo ele na página desejada, está tudo certo.

O que eu desejo é trazer o componente sem o Button para a nova página. Como posso fazer isso?

Componente pai:

const PageDefault = () => {
  return <Header />;
};
    
export default PageDefault;

Componente Header:

const Header = () => {
  return (
    <nav className="Header">
      <Link to="/">
        <img className="Sena" src={Sena} alt="sena imagem" />
      </Link>

      <Button as={Link} className="Button" to="/sena/bel">
        Registrar
      </Button>
    </nav>
  );
};

export default Header;

1 Resposta 1

1

Se faz sentido esse botão fazer parte do Header e aparecer em apenas algumas ocasiões, você pode fazer:

const Header = ({ withButton }) => {
  return (
    <nav>
      <Link />

      {withButton && <Button />}
    </nav>
  );
}

E quando quiser que ele tenha o botão, usar:

return <Header withButton={true} />; // Ou <Header withButton />

Caso esse botão seja um conteúdo extra de uma tela específica, você pode receber um componente como prop:

const Header = ({ extraContent }) => {
  return (
    <nav>
      <Link />

      {extraContent}
    </nav>
  );
}

E chamar o componente desse modo:

const button = <Button />;

return <Header extraContent={button} />
1
  • Opa!!! Muito obrigado!! Era isso mesmo que estava precisando! Conseguir solucionar aqui. Grato!!! 28/07/2020 às 20:30

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .