Сделай компонент, в котором вся общая логика элемента меню + пропсами меняющаяся и просто рендери его разными способами. function SubMenuSuperItem({ item: { id, name }, onClick, path }) { return ( <li> <SubMenu size="..." id={id} name={name} mouseLeave={() => '...'} click={onClick} path={path} /> </li> ); } // .... const relatedSubItems = useMemo( () => menu.subItems .filter(subItem => subItem.parent_id === item.id) .map(subItem => ({ value: subItem, haveChild: menuHaveChild(menu, subItem.id) })), [menu, item] ); return relatedSubItems.map(({ value, haveChild }) => haveChild ? ( <SubMenuSuperItem key={value.id} item={value} path="catalog" /> ) : ( <SubMenuSuperItem key={value.id} item={value} path="products" onClick={() => dispatch('...')} /> ) );
спасибо!
Обсуждают сегодня