2

estou tendo dificuldade em compartilhar estados entre componentes utilizando o react hooks. Alguém pode me dar um help?

import React, { useState } from 'react'
import Nav from './Nav'


export default function Header(){

    const [open, setOpen] = useState(false);

    return(
        <header className="header">
            <div className="container">
                <Nav/>

                <div className="hamburger" id="hamburger-6" onClick={() => setOpen(!open)} className={open ? "is-active": ""}>
                    <span className="line"></span>
                    <span className="line"></span>
                    <span className="line"></span>
                </div>
            </div> 
        </header>
    );
}

Eu preciso compartilhar a state open com o componente Nav

import React, { useState, useEffect } from 'react'

export default function Nav(){
    const [open, setOpen] = useState(false);

    return(
        <nav className={open ? "header__nav active": "header__nav"}>
            <Link to="/" className="header__nav--link" onClick={() => setOpen(!open)} >Início</Link>
            <Link to="/sobre" className="header__nav--link" onClick={() => setOpen(!open)} >Sobre</Link>
            <Link to="/habilidades" className="header__nav--link" onClick={() => setOpen(!open)} >Habilidades</Link>
            <Link to="/projetos" className="header__nav--link">Projetos</Link>
            <Link to="/contato" className="header__nav--link">Contato</Link>
        </nav>
    );
}

3 Respostas 3

1

Quando o componente pai é renderizado, o componente filho também o é por padrão. Você pode usar uma lógica para não atualizar, mas de qualquer modo, faz sentido atualizar quando uma prop mudar, que é o que darei como exemplo.

  1. Envie o estado atual para o Nav (open).
  2. Envie uma função que o Nav possa executar que indique que você deve abrir ou fechar o seu menu (mudar o valor de open)

Quando essa função for chamada dentro do Nav, o Header irá atualizar o estado, renderizando a si mesmo e ao Nav com o novo valor de open.

Header

export default function Header(){
    const [open, setOpen] = useState(false);

    return(
        <header className="header">
            <div className="container">
                <Nav open={open} onClick={() => setOpen(!open}/>

                <div className="hamburger" id="hamburger-6" onClick={() => setOpen(!open)} className={open ? "is-active": ""}>
                    <span className="line"></span>
                    <span className="line"></span>
                    <span className="line"></span>
                </div>
            </div> 
        </header>
    );
}

Nav

export default function Nav({ open, onClick }){

    return(
        <nav className={open ? "header__nav active": "header__nav"}>
            <Link to="/" className="header__nav--link" onClick={() => onClick()} >Início</Link>
            <Link to="/sobre" className="header__nav--link" onClick={() => onClick()} >Sobre</Link>
            <Link to="/habilidades" className="header__nav--link" onClick={() => onClick()} >Habilidades</Link>
            <Link to="/projetos" className="header__nav--link">Projetos</Link>
            <Link to="/contato" className="header__nav--link">Contato</Link>
        </nav>
    );
}

Nomeie as funções e os nomes conforme fizer sentido para o seu componente, deixei apenas um exemplo simples de como pode ser feito.

1
  • 1
    Show de bola Rafael, consegui chegar a uma solução utilizando o seu exemplo, muito obrigado :D 24/05/2020 às 21:51
0

Você está querendo fazer um Prop drilling que é basicamente passar props para os seus filhos e assim sucessivamente, exemplo:

function Children({open}) {
  return (<div>{open ? "Aberto": "Fechado"}</div>)
}
function Father() {
  const [open, setOpen] = React.useState(false);
  const handleToggleOpen = () => setOpen(!open);
  return (
    <div>      
      <button onClick={handleToggleOpen}>
        {open ? "Aberto": "Fechado"}
      </button>
      <br /><br />
      <Children open={open} />
    </div>
  )
}
ReactDOM.render( <Father/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

ou seja, por props consegue passar estado de um componente para o outro. Dependendo a situação é melhor utilizar Redux ou ContextApi que recuperam variáveis que possam ser compartilhadas em qualquer componente.

1
  • 1
    Obrigado pelo seu exemplo Virgilio, eu sabia que dava pra passar o estado utilizando o redux, mas por se tratar de um projeto simples eu não achei que seria interessante utiliza-lo. Mas vô dar uma sacada no ContextApi, Vlw :D 24/05/2020 às 22:02
-1

Já tentou passar dessa forma?

<Nav props={open}/>

ai vc recebe assim:

    function Nav({props}) {
    const [open, setOpen] = useState(props);
    ...
1

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 .