у меня есть компонент <Header/> в нём есть иконка габурге-меню.
По клику на неё, мне нужно добавить
class в компоненте <Nav/>
Я набросал такой код:
const [isActive, setActive] = useState("false");
const handleToggle = () => {
setActive(!isActive);
};
<div onClick={handleToggle} > </div>
<div className={isActive ? "open" : null}> </div>
Если лив по которому кликаем и див которому меняем класс в одном компоненте, всё работает, но как развести их по разным компонентам и сохранить работоспособность?
хоистинг
чИто?
Если компоненты близкие друг к другу типа родителя и потомка то можно хранить стейт этот в родителе и тамже изменять и прокидывать его и функцию меняющую его в props потомка. Если же это не связанные компоненты типа меню и один из разделов системы, то имхо лучше в redux сделать экшен и следить за ним уже в нужных компонентах, иначе если такого будет много, то слишком много мусора прийдеться таскать по всем компонентам в пропсах.
Точно, через Redux и сделаю, спасибо
Сейчас редакс не имеет особого смысла. Есть же контекст
https://gist.github.com/XaveScor/99431c573b53b8a0c41fb3b5fec522bc
Обсуждают сегодня