0

Como passar informações entre componentes no React como props ou status.

Nessa situação tenho um botão e um menu. O menu deve ser aberto toda vez que o botão ser clicado.

Botão

import React, { Component } from 'react';
import './Navbar.css';

class Navbar
 extends Component {
    state = {  }
    render() { 
        return ( 
            <nav>
                <button className="MenuSlide">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
            </nav>
         );
    }
}

export default Navbar;

Menu

import React, { Component } from 'react';

class Menu extends Component {

    render() { 
        return (
            <aside>
                {this.props.children}
            </aside>
        );
    }
}

export default Menu;

Página onde os componentes estão.

import React, { Component } from 'react';

/* Components */
import Navbar from '../../component/top/Navbar';
import Menu from '../../component/sideBar/Menu';
import Main from "../../component/sideCenter/Main";

class Dashboard extends Component {

    render() {
        return (
            <div className="App" data>
                <Navbar />
                <Menu />
            </div>
        );
    }
}

export default Dashboard;

1 Resposta 1

1

O React utiliza uma abordagem "top-down" para passar dados entre componentes. Dessa forma, é possível apenas passar dados para os componentes filhos.

No seu caso para compartilhar dados entre componentes irmãos (Navbar e Menu) você precisa que o componente pai (Dashboard) (1) guarde a informação se o menu está aberto ou não; e (2) disponibilize uma forma de alterar o estado do menu.

Para fazer o (1) vamos definir um estado para o componente Dashboard:

this.state = { isMenuOpen: false }

Para fazer o (2) vamos criar um método que alterna o estado do menu:

toggleMenu() {
  this.setState({isMenuOpen: !this.state.isMenuOpen})
}

Depois disso, você precisa passar passar o this.state.isMenuOpen para o componente Menu e a função toggleMenu() para o componente Navbar. O seu código final ficaria mais ou meno como o apresentado abaixo:

function NavBar(props) {
  const { toggleMenu } = props;
  return <button onClick={toggleMenu}>Botão</button>
}

function Menu(props) {
  const style = {
    display: props.isOpen ? 'block' : 'none'
  }

  return <aside style={style}>Menu {isMenuOpen}</aside>
}

class Dashboard extends React.Component {
  constructor(props) {
      super(props);

      this.state = { 
         isMenuOpen: false 
      }

     this.toggleMenu = this.toggleMenu.bind(this)
  }

  toggleMenu() {
    this.setState({isMenuOpen: !this.state.isMenuOpen})
  }

  render() {
    return (
        <div>
          <NavBar toggleMenu={this.toggleMenu} />
          <Menu isOpen={this.state.isMenuOpen} />
        </div>
    );
  }
}

Como o seu caso é simples, fazendo apenas algumas alterações foi possível compartilhar dados entre componentes "irmãos". Em casos mais complexos, talvez possa ser necessário fazer uso de bibliotecas de gerenciamento de estado como o Redux e MobX. Mas o ideial é sempre começar de forma mais simples sem o uso de bibliotecas e usar somente quando necessário.

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 .