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".