1

Minha dúvida é a seguinte, tenho um componente no React chamado NavBar.jsx e gostaria que o titulo no NavBar alterasse assim que outro componente fosse aberto.

Por exemplo, quando abrir a tela de cadastro de cliente, alterar o titulo para "Cadastro de Clientes".

Usei o um HOOK do useState para criar o titulo.

Porém ao abrir outro componente queria alterar o state do titulo para um outro titulo assim que ele fosse renderizado, para isso tento chamar com useEffect, mas não funciona e da um erro.

"Attempted import error: 'setTitulo' is not exported from '../components/NavBar' (imported as 'NavBar')."

NavBar.jsx

import React from 'react';
import { useState } from 'react'
import { Nav, Navbar, NavDropdown } from 'react-bootstrap'

const NavBar = (props) => {

const [titulo, setTitulo] = useState("Controle Diário")

return (
<Navbar className="shadow-lg mb-5 bg-secondary " variant="light">
    <Navbar.Brand href="/">
        <img
            src={logo}
            
            height="40"
            className="d-inline-flex align-top"
            alt="Logo"
        />
    </Navbar.Brand>
    <Nav className="mr-auto">
        <Nav.Link href="#">Controle Diário</Nav.Link>
        <NavDropdown title="Cadastro" id="basic-nav-dropdown">
            <NavDropdown.Item href="/clientes">Clientes</NavDropdown.Item>
            <NavDropdown.Item href="#">Motorista</NavDropdown.Item>
            <NavDropdown.Item href="#">Notas Fiscais</NavDropdown.Item>
            <NavDropdown.Divider />
            <NavDropdown.Item href="#">Outros</NavDropdown.Item>
        </NavDropdown>
    </Nav>
    <h4 className="mr-auto font-weight-bold">{titulo}</h4>
</Navbar>
)}

export default NavBar 

MainCliente.jsx

import React from 'react';
import { useState, useEffect } from 'react'
import * as NavBar from '../components/NavBar'

const MainClientes = (props) => {

// Esta e a linha que esta gerando o erro

useEffect(NavBar.setTitulo("Cadastro de Clientes"),[])

....

2 Respostas 2

2

Tem muitas maneiras de fazer isso. Tem uma pergunta similar na comunidade em Ingles que pode ajudar.

Dessa forma não funciona basicamente porque você está tentando acessar uma variável dentro do escopo de outra função.

Uma coisa que é legal ressaltar é que não é muito legal manter estado fora dos componentes ou store, isso pode causar problemas de atualização do DOM. Tenho algumas sugestões de solução:

  1. Manter o estado no componente acima tem uma técnica bem legal de estudar conhecida com HOC que basicamente consiste em manter a parte logica nos componentes pais.

Dessa forma imagine ter dois componentes filhos quer que eles compartilhem um estado para isso é só manter o estado no pai desta forma:

const rootElement = document.getElementById("root");

function ChildA(prop) {
  return (
    <section>
      <button 
        onClick={
          () => prop.alterar('alterado atraves do A')
        }>
        Alterar atravez do A
      </button>
      Valor no A: { prop.valor }
    </section>
  )
}

function ChildB(prop) {
  return (
    <section>
      <button 
        onClick={
          ()=> prop.alterar('alterado atraves do B')
        }>
        Alterar atravez do B
      </button>
      Valor no B: { prop.valor }
    </section>
  )
}

function App() {
  const [state, setState] = React.useState('inicial');
  
  return (
    <div>
      <ChildA valor={state} alterar={setState} />
      <ChildB valor={state} alterar={setState} />
    </div>
   )
}

ReactDOM.render(<App />, rootElement);
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

  1. Guarda isso em uma store como redux assim você tem a flexibilidade de acessar e alterar isso de qualquer lugar, o código fica meio complexo mas se estiver criando uma aplicação mais robusta é um bom caminho.

const rootElement = document.getElementById('root');
const ALTERAR = 'ALTERAR';

// ESSA SERIA SUA STORE
const reducer = (state = 'inicial', action) => {
  switch (action.type) {
    
    case ALTERAR:
      return action.valor;
      
    default:
      return state;
  }
};

const store = Redux.createStore(reducer);

const Provider = ReactRedux.Provider;
const connect = ReactRedux.connect;

// AQUI VOCE MAPEIA OS ESTADOS QUE O COMPONENTE IRA USAR PARA EVITAR RENDERIZAÇÕES DESNECESSARIAS
const mapStateToProps = (state) => {
  return { valor: state };
};

// AQUI VOCE MAPEIA OS REDUCERS QUE DESEJA USAR COMO PROP
const mapDispatchToProps = (dispatch) => {
  return {
    alterar: (valor) => {
      dispatch({ type: ALTERAR, valor })
    }
  }
};

function ChildA(prop) {
  return (
    <section>
      <button 
        onClick={
          () => prop.alterar('alterado atraves do A')
        }>
        Alterar atravez do A
      </button>
      Valor no A: {prop.valor}
    </section>
  )
}

const ChildAConectado = connect(mapStateToProps, mapDispatchToProps)(ChildA);

function ChildB(prop) {
  return (
    <section>
      <button 
        onClick={
          ()=> prop.alterar('alterado atraves do B')
        }>
        Alterar atravez do B
      </button>
      Valor no B: {prop.valor}
    </section>
  )
}

const ChildBConectado = connect(mapStateToProps, mapDispatchToProps)(ChildB);


function App() {
  return (
    <Provider store={store}>
      <main>
        <ChildAConectado />
        <ChildBConectado />
      </main>
    </Provider>
  )
}

ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.0/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.7/react-redux.min.js"></script>

<div id="root"></div>

  1. Você pode usar um lib específica para isso elas não são muito famosas por não serem oficiais mas cumprem oque prometem abaixo algumas delas:

1
  • Obrigado pelo conteúdo em sua resposta, vou estudar com calma essas saídas possíveis para decidir qual utilizar.
    – TadeuTr
    Commented 1/10/2020 às 13:01
1

Dá uma checada na resposta desse post O que é “Prop drilling”? para uma explicação mais completa, nele também há alguns exemplos das três alternativas citadas abaixo.

Há três alternativas:

  • Redux, mas é usado em casos específicos e quando realmente necessário, experiência própria, não use Redux se você não precisa realmente.

  • Context API e Render props, o próprio React oferece ferramentas para lidar com isso.

1
  • Obrigado, dei uma olha no tópico, das opções que tem, vou tentar inicialmente o Render props, já achei bastante conteúdo sobre. Vou entender melhor e aplicar para ver como fica.
    – TadeuTr
    Commented 1/10/2020 às 13:04

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 .