1

Boa noite!

Estou no desenvolvimento de uma página que tem três botões.

Sendo que o primeiro botão(Publicações) renderiza este conteúdo: inserir a descrição da imagem aqui

O segundo Botão(Jorys) renderiza este segundo conteúdo: inserir a descrição da imagem aqui

E o terceiro botão(Sugestões) renderiza este terceiro conteúdo vazio(por enquanto): inserir a descrição da imagem aqui

OBS: Sempre que se clica em um botão o react-route muda o path:

  • Sendo /explorer para Publicação;
  • /jorys para Jorys e;
  • /sugestions para Sugestions.

A ideia é fazer com que sempre que um botão é clicado uma classe chamada active seja adicionada ao link desse botão (e consequentemente retire essa classe dos outros botões caso eles a tenham) para fins de um css personalizado no botão personalizado!

Eu consegui implementar a lógica por trás disso, porém estou tendo problemas para que funcione na prática pois sempre que mudo o state pelo setState(), a atualização (ou seja a adição da classe) só vem no próximo mount! Mesmo eu utilizando de componentDidUpdate() não da resultado...

Vou deixar o código abaixo:

import React, { Component } from 'react'
import {Box, Grid } from "@chakra-ui/react"
import TabExplorer from './TabExplorer'
import TabWorks from './TabWorks'
import {Link, BrowserRouter as Router, Switch, Route} from 'react-router-dom'


export default class Tabs extends Component {

    constructor(props){
        super(props)
        this.isClicked = this.isClicked.bind(this)
        this.updateClass = this.updateClass.bind(this)

        this.state = {
            explorer: true,
            jorys: false,
            sugestions: false
        }
    }

    componentDidMount() {
        this.isClicked()
        this.updateClass()
    }

    componentWillUnmount() {
        this.isClicked()
        this.updateClass()
    }

    componentDidUpdate() {
        this.updateClass()
    }
    UNSAFE_componentWillUpdate(){
        this.updateClass()
    }

    isClicked() {
        const stateHere = this.state
        const path = window.location.pathname
        switch(path){
            case '/explorer':
                stateHere.explorer = true
                stateHere.jorys = false
                stateHere.sugestions = false
            break
            case '/jorys':
                stateHere.jorys = true
                stateHere.explorer = false
                stateHere.sugestions = false
            break
            case '/sugestions':
                stateHere.sugestions = true
                stateHere.jorys = false
                stateHere.explorer = false
            break
            default:
            break
        }
        return this.setState({state: stateHere})
    }

    updateClass() {
        const explorer = document.getElementById('explorer')
        const jorys = document.getElementById('jorys')
        const sugestions = document.getElementById('sugestions')
        this.state.explorer ? explorer.classList.add('active') : explorer.classList.remove('active')
        this.state.jorys ? jorys.classList.add('active') : jorys.classList.remove('active')
        this.state.sugestions ? sugestions.classList.add('active') : sugestions.classList.remove('active')
    }
    
    render() {
        return (
            <React.Fragment>
                <Router>
                    <Box as='main'>
                        <Grid
                            gridTemplateColumns='22% 50% 28%'
                            gridAutoRows='40px 100vh'
                            gridTemplateAreas="'. tab .' 'content content content'">
                            <Box
                                as='div'
                                gridArea='tab'
                                m='auto'
                                display='flex'
                                flexDirection='row'>
                                <Link to='/explorer' onClick={(e) => this.isClicked(e)}>
                                    <Box
                                        id='explorer'
                                        p='5px'
                                        fontFamily='Open Sans, sans-serif'
                                        fontWeight='medium'
                                        fontSize='14px'
                                        color='black'
                                        _active={{ color: "#C2383A", bg: "transparent"}} 
                                        _focus={{border: 'none'}} >
                                            Publicações
                                    </Box>
                                </Link>
                                <Link to='/jorys' onClick={(e) => this.isClicked(e)}>
                                    <Box
                                        id='jorys'
                                        p='5px' 
                                        fontFamily='Open Sans, sans-serif'
                                        fontWeight='medium'
                                        fontSize='14px'
                                        color='black'
                                        _selected={{ color: "#C2383A", bg: "transparent"}} 
                                        _focus={{border: 'none'}}>
                                            Jorys
                                    </Box>
                                </Link>
                                <Link to='/sugestions' onClick={(e) => this.isClicked(e)}>
                                    <Box
                                        id='sugestions'
                                        p='5px' 
                                        fontFamily='Open Sans, sans-serif'
                                        fontWeight='medium'
                                        fontSize='14px'
                                        color='black'
                                        _selected={{ color: "#C2383A", bg: "transparent"}} 
                                        _focus={{border: 'none'}}>
                                        Sugestões
                                    </Box>
                                </Link>
                            </Box>
                            <Box 
                                gridArea='content'
                                display='flex'
                                justifyContent='center'
                                alignItems='flex-start'>

                                <Switch>
                                    <Route path='/explorer'>
                                        <TabExplorer/>
                                    </Route>
                                    <Route path='/jorys'>
                                        <TabWorks/>
                                    </Route>
                                </Switch>
                                
                            </Box>
                        </Grid>
                    </Box>
                </Router>
            </React.Fragment>
        )
    } 
}

Alguém pode me ajudar??

1 Resposta 1

1

Já que está usando a lib do React Router, você não precisa controlar os links ativos se utilizar os recursos do NavLink.

A special version of the that will add styling attributes to the rendered element when it matches the current URL.

Ele já faz todo o controle de estilização caso o componente "case" com a URL passada.

Por exemplo:

<NavLink to="/explorer" activeStyle={{ color: "#C2383A", textDecoration: "none" }}>
    <Box
        id="explorer"
        p="5px"
        fontFamily="Open Sans, sans-serif"
        fontWeight="medium"
        fontSize="14px"
        _focus={{ border: "none" }}
    >
        Publicações
    </Box>
</NavLink>

Você pode usar tanto a propriedade activeClassName quanto o activeStyle.

Criei um exemplo funcional com o código que você passou: https://codesandbox.io/s/boring-wood-3e1uq?file=/src/App.js

1
  • Era exatamente isso que eu estava precisando! Muito Obrigado!
    – Freesouls
    Commented 7/05/2021 às 18:37

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 .