Cześć! Mam do oprogramowania zaznaczenie aktywnego elementu w pasku menu i jest on z animacją. Postanowiłem po kliknięciu dodać klasę active z animacją do elementu jednak każdy element przenosi do innej strony i powoduje przeładowanie całego DOM w tym komponentu z menu co daje brak dodanej klasy. Próbowałem rozwiązać problem poprzez local storage(zapisywałem pełną klasę elementu który ma active a później ją odczytywałem w konstruktorze tj. przy ponownym ładowaniu na innej stronie). Jednak to rozwiązanie powoduje że animacja obrazka pojawia się dopiero po załadowaniu elementów DOM a jest w niej zawarte uniesienie się elementu menu i daje to efekt podskakującego elementu. Czy jest możliwość dodania klasy już w odpowiednim momencie przy ładowaniu nowej strony? Oto mój kod:
class MenuBar extends React.Component {
constructor() {
super();
this.getActiveTab();
}
setActiveTab(e){
let elements = document.querySelectorAll('.menu-icon');
elements.forEach(link => {
if(e.target.className === link.className){
//save clicked element class to local storage
localStorage.setItem('activeTabClass',link.className);
//add active class
e.target.className.add('icon-active');
}
})
}
getActiveTab() {
//read activeTab data for state before reload or go to next link
let activeTab = localStorage.getItem('activeTabClass');
let elements = document.querySelectorAll('.menu-icon');
elements.forEach(link => {
if(link === activeTab){
link.className.add('icon-active');
}
});
//set local storage as empty for non menu elements on the page
localStorage.setItem('activeTabClass','');
}
render() {
return <nav classname="nav menu-bar">
<a href='/page1/terms'><i classname="menu-icon icon-1" onClick={this.setActiveTab.bind(this)}/></a>
<a href='/page2/index'><i classname="menu-icon icon-2" onClick={this.setActiveTab.bind(this)}/></a>
<a href='/page3/about'><i classname="menu-icon icon-3" onClick={this.setActiveTab.bind(this)}/></a>
<a href='/page4/photos'><i classname="menu-icon icon-4" onClick={this.setActiveTab.bind(this)}/></a>
</nav>;
}
};
export default MenuBar;
Ogólny efekt ma być tak że animacja pojawia się po kliknięciu obrazkowego elementu menu, strona przechodzi na podany URL i stan tego elementu jest taki jak ma być po animacji elementu z klasą active czyli obrazek lekko do góry. Po prostu wyróżnienie wybranego elementu i zachowanie takiego jego stanu po przejściu na stronę.
React 
JavaScript