Здравствуйте, господа. Делаю горизонтальное меню на React и у меня возникла проблема перерендера того, что не нужно рендерить заного. Пишу на функциональных компонентах!
Имея такую структуру:
// MenuItem - отдельный дочерний компонент для каждого пункта меню
// showChild - переменная в которой хранится ID главного пункта, где должны отобразиться дочерние элементы
сonst [showChild, setShowChild] = useState(null)
const toggleMenu = (id, with_child, fl, e) => {
if(with_child !== '' && fl) {
if (showChild !== id)
setShowChild(id)
else {
Fade.Out('.j_h_menu_child_sub[id="' + id + '"]', 200, function () {
setShowChild(null)
})
}
e.preventDefault()
}
else
return true
}
return (
<div className="i_h_menu_react">
{items.map((item) =>
<MenuItem item={item} key={item.ID} showChild={showChild} setShowChild={toggleMenu} ww_mob={ww_mob}/>
)}
</div>
)
P.S. Я специально выложил только часть кода, дабы упростить понимание процесса.
Через дочерний компонент я вызываю функцию, которая меняет showChild, подставляя туда другой ID. Такой подход мне необходим для того, чтобы дочерние элементы отображались только в кликнутом пункте, а в остальных были скрыты. При переклике на другой пункт, старые дочерки скрывались и появлялись в другом пункте.
Однако обновляя showChild React по новой рендерит абсолютно все компоненты. Грубо говоря запускает цикл в шаблоне по новой. Соответственно происходит Mount всех компонент по новой.
Как мне объявить переменную, которая хранилась бы в главной компоненте и не запускала перерендер при ее изменении. Но такую, чтобы я смог отследить ее изменение в дочерних компонентах и соответственно запустить перерендер только в нужной мне компоненте.
