0

Estou fazendo um site com Bootstrap e ReatJs e nesse site tem um menu responsivo. Este menu assemelha-se a isso (exemplo):

  • Dashboard
  • Cadastro
    • Usuário
    • Administrador

Cada vez que eu clico em um dos itens do menu é colocado pelo NavLink um active no className para mudar a cor do item do menu, até aí está funcionando tudo normalmente, o problema é que eu quero que mude a cor do menu, mas quando for um submenu quero que mude por exemplo a cor do menu "Usuário" e também do "Cadastro", pois a página "usuário" está dentro de "cadastro". Tenho tentado fazer isso mas ainda não consegui. O Código para isso é este:

Tenho o Menu que vai chamando para montar o menu que eu quero: Menu.jsx

<MenuItem path='/' label='Dashboard' exact={ true } icon='home' />
<MenuTree label='Cadastro' icon='contacts' id='cadastro'>
    <MenuTreeItem path='/user' label='Usuário' />
    <MenuTreeItem path='/admin' label='Administrador' />
</MenuTree>

O MenuItem funciona normalmente, pois não tenho esse submenu. Para o MenuTree o código é esse e aqui que está o problema.

MenuTree

import React from 'react'

class MenuTree extends React.Component {

hasActiveLink = () => {
    return (document.querySelectorAll(`#ul_${ this.props.id } a.active`).length === 0) ? "" : "active";
}

render() {
    this.classActive = this.hasActiveLink();

    return (
        <li className="nav-item">
            <a className={`nav-link ${ this.classActive }`} data-toggle="collapse" href={ `#${ this.props.id }` } aria-expanded="false" aria-controls={ this.props.id }>
                <span className="menu-title">{ this.props.label }</span>
                <i className="menu-arrow"></i>
                <i className={`mdi mdi-${ this.props.icon } menu-icon`}></i>
            </a>
            <div className="collapse" id={ this.props.id }>
                <ul className="nav flex-column sub-menu" id={ `ul_${ this.props.id }` }>
                    { this.props.children }
                </ul>
            </div>
        </li>
        )
    }
}

export default (MenuTree)

Tenho o MenuTreeItem

import React from 'react'
import { NavLink } from 'react-router-dom'

export default props => (

<li className="nav-item">
    <NavLink className="nav-link" to={props.path} exact={props.exact} activeClassName="active">{props.label}</NavLink>
</li>
)

Como pode ser verificado, no caso de eu clicar em um MenuTreeItem, ele é alterado e inserido o active no class e assim funciona, porém não muda o MenuTree que é o parent, então eu fiz a função "hasActiveLink" que verifica se tem algum link dentro dessa tree com o active na class, mas isso funciona com erro, pois só aparece o active no meu menu principal, no caso o "Cadastro" quando eu clico pela segunda vez, pois pelo que percebi ele verifica o estado sempre anterior ao do clique, pois só é acionado depois da renderização, assim só na próxima vez é alterado a classe do meu menu principal. O que eu posso fazer para pegar essa informação do child e colocar o active no parent?

Obs.: Já tentei colocar também em todas as funções do próprio react, como por exemplo "componentDidUpdate".

0

1 Resposta 1

-1

Consegui resolver da maneira descrita abaixo. Não sei se é a melhor alternativa, mas agora está funcionando perfeitamente.

import React from 'react'
import { withRouter } from "react-router-dom"

class MenuTree extends React.Component {

    constructor(props) {
        super(props);
        this.classNameNoActive = ""
        this.classNameActive = "active"
        this.classActive = this.classNameNoActive;
    }

    getActiveChild = () => {

        const { match, location } = this.props
        var activeChild = false;
        var arrayChildren = this.props.children

        if (arrayChildren.length === undefined) {

            if (location.pathname === arrayChildren.props.path)
                    return true
        } else {
            for(var i = 0; i < arrayChildren.length; i++) {

                if (location.pathname === arrayChildren[i].props.path)
                    return true
            }
        }

        return activeChild
    }

    render() {
        this.classActive = (this.getActiveChild()) ? this.classNameActive : this.classNameNoActive
        return (
            <li className="nav-item">
                <a className={`nav-link ${ this.classActive }`} data-toggle="collapse" href={ `#${ this.props.id }` } aria-expanded="false" aria-controls={ this.props.id }>
                    <span className="menu-title">{ this.props.label }</span>
                    <i className="menu-arrow"></i>
                    <i className={`mdi mdi-${ this.props.icon } menu-icon`}></i>
                </a>
                <div className="collapse" id={ this.props.id }>
                    <ul className="nav flex-column sub-menu" id={ `ul_${ this.props.id }` }>
                        { this.props.children }
                    </ul>
                </div>
            </li>
        )
    }
}

export default withRouter(MenuTree)

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 .