React: Alterar valores de outro arquivo | Front-end

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Denis Ivan Correia

| 55.6k xp | 92 posts

Programador Front-end

Boa tarde galera,

Estou com uma dificuldade em como resolver o seguinte problema.

tenho o arquivo Main onde possuo as rotas:

//Main.js

import React from 'react';

import Menu from './FinanceiroMenu';
import Banco from './FinanceiroBanco';
import Pagamento from './FinanceiroFormaPagamento';

import Navbar from './componentes/NavbarPage2';

const Main = () => {
  return <main>
    <Navbar
      color="teal lighten-1"
    ></Navbar>
    <Switch>
      <Route exact path={'/front' + Versao + '/menu'} component={Menu} />
      <Route exact path={'/front' + Versao + '/banco'} component={Banco} />
      <Route exact path={'/front' + Versao + '/pagamento'} component={Pagamento} />
    </Switch>
  </main>
};

export default Main;

No arquivo Main.js deixei a Navbar pois assim ela ficava fixa sem ser recarregada quando era feito a troca de pagina.

//NavbarPage2.js

//importes e metodos

<div>
   <Router>
                    <Navbar className="p-0 pl-3 fixed-top" color={this.props.color} dark expand="md" scrolling>
                        <NavbarBrand className="d-lg-none" href="">
                            {button1}
                        </NavbarBrand>
                        <NavbarNav right>
                            <NavItem>
                                <h3 id="headerNavbar" className="white-text">{this.props.tituloHeader}</h3>
                            </NavItem>
                        </NavbarNav>
                        <NavbarNav right>
                            <NavItem>
                                <Dropdown isOpen={this.state.dropdownOpenNavbar} toggle={this.toggleNavbar}>
                                    <DropdownToggle nav caret>Módulo</DropdownToggle>
                                    <DropdownMenu>
                                        <DropdownItem href="#">Financeiro</DropdownItem>
                                        <DropdownItem href="#">Fiscal</DropdownItem>
                                    </DropdownMenu>
                                </Dropdown>
                            </NavItem>
                            <NavItem className="d-none d-lg-block">
                                <NavLink to="#"><Fa icon="user" size="1px" />Sair</NavLink>
                            </NavItem>
                        </NavbarNav>
                    </Navbar>
                </Router>
            </div>

O problema é que quando o usuário esta ná pagina "Bancos" por exemplo eu precisaria passar o valor de

{this.props.tituloHeader}

para "Banco" e quando estiver no Menu para "Menu".

Como posso passar o valor do titulo Header ?

Eu consigo fazer se fosse uma Navbar por pagina, por exemplo na pagina Banco.js ficaria assim:

return(
<div>
    <Navbar
   tituloHeader="Banco"
    >
    </Navbar>
</div>

);

Mas como posso passar a propriedade para a Navbar se ela é chamada e renderizada no arquivo Main.js e não no arquivo Banco.js, Menu.js e etc...

2 respostas

solução!

por Artur Diniz Adam

| 100.4k xp | 155 posts

Alura Scuba Team Desenvolvedor e Instrutor

05/06/2018

Oi Denis,

Não acho que seria um problema usar uma <Navbar> por página, ainda mais quando comparado com a solução que vou te mostrar.

Existe uma função chamada withRouter que você pode importar de dentro do react-router (estou assumindo que vc está usando essa lib)

Essa função é um decorator. Isso significa que ela cria um componente por cima de um outro componente que você passar como parâmetro. No caso, o decorator withRouter vai criar um componente que terá acesso as infos da localização através de this.props.location.

Se usar o withRouter na <Navbar>, você pode decidir o valor de tituloHeader baseado no valor de this.props.location (tituloHeader viraria uma propriedade do state assim)

O código ficaria assim (estou resumindo o método render pra parte que usa o tituloHeader)

# ./componentes/NavbarPage2.js

import {withRouter} from 'react-router'

class Navbar extends React.Component {
    render(){
        return (
        <h3 id="headerNavbar" className="white-text">
            {this.state.tituloHeader}
        </h3>
        )
    }

    componentWillReceiveProps(props){
        let tituloHeader
        if(props.location.pathname == '/'){
            tituloHeader = 'Home'
        }
        else if(props.location.pathname == '/exemplo'){
            tituloHeader = 'Exemplo'
        }

        this.setState({tituloHeader}
    }
}

export default withRouter(Navbar)

Acho meio complexa a solução e por isso acho mais simples usar o Navbar em cada página mesmo. O que vc acha?

por Denis Ivan Correia

| 55.6k xp | 92 posts

Programador Front-end

06/06/2018

Funcionou perfeitamente, muito obrigado.

Por agora não esta complexo, porem se com o passar do tempo surgir outras necessidades vou considerar colocar uma Navbar por pagina.

Artur não sei é a maneira que estou redirecionando para a pagina "Home" mas quando o usuário clicka para entrar nesse "modulo" financeiro eu faço uma validação para ver se ele tem acesso ou não a pagina.

Caso o usuário tiver acesso eu redireciono desse jeito:

 window.location.href = Front + '/financeiroMenu'

Oque esta acontecendo é que quando ele cai no HOME pela primeira vez pelo redirecionamento ele não puxa o Header.

class NavbarPage2 extends React.Component {
///
    componentWillReceiveProps(props){
        let tituloHeader
        if(props.location.pathname === Front+'/financeiroMenu'){
            tituloHeader = 'Home'
        }
        if(props.location.pathname ===  Front+'/financeiroBanco'){
            tituloHeader = 'Banco'
        }
        if(props.location.pathname ===  Front+'/financeiroPagamento'){
            tituloHeader = 'Forma de Pagamento'
        }
        this.setState({tituloHeader})
    }

Porem se eu clicar no Banco e depois voltar para o Home, ai sim ele puxa.