<DropdownMenuBoxStyled>
<a
//href={`/city/${coordsUrl}`}
onClick={toggleMenuCities}
title="Пивная карта по городам"
>
{mainCity.name} <i className="fa fa-angle-down"></i>
</a>
<DropdownMenuStyled opened={citiesOpened}>
{citiesList}
</DropdownMenuStyled>
</DropdownMenuBoxStyled>
В нем есть стайлед-компоненты DropdownMenuBoxStyled и DropdownMenuStyled, которые берутся из ./styled.ts
Надо их вынести в отдельный компонент DropdownMenu (там, скорее всего, придется переименовать компоненты DropdownMenuBoxStyled и DropdownMenuStyled, чтобы было логичней, так как сейчас получается, что компонент с более коротким названием является вложенным в компонент с более длинным названием, что противоречит интуитивнопонятному неймингу).
То есть тебе надо создать компонент DropdownMenu, чтобы ты в главном меню мог вызывать так:
<DropdownMenu
{...linkProps}
>
{citiesList}
</DropdownMenu>
linkProps - это я общий набор параметров для ссылки обозначил. Фактически же да, ты будешь перечислять явно типа такого:
<DropdownMenu
name={name}
href={href}
title={title}
{/* И т.п. */}
>
{citiesList}
</DropdownMenu>
А в том компоненте будет типа так:
const DropdownMenu: React.FC<DropdownMenuProps> = ({
name,
href,
title,
children,
...other
}) => {
/**
* Здесь вся логика с citiesOpened, toggleMenuCities и т.п.
*/
return <DropdownMenuStyled
{...other}
>
<a
href={href}
title={title}
onClick={toggleMenuCities}
>
{name} <i className="fa fa-angle-down"></i>
</a>
<DropdownSubMenuStyled opened={citiesOpened}>
{children}
</DropdownSubMenuStyled>
</DropdownMenuStyled>;
}
Но здесь, как видишь, other попадает в корневой тег меню, а не в ссылку, и в данной реализации получается, что у тебя ссылка имеет на вход очень ограниченное число параметров, хотя может быть сильно больше, чем ты изначально предполагаешь. Возможно имеет смысл href, title, name вынести в отдельный параметр типа linkProps, чтобы можно было сделать так:
const DropdownMenu: React.FC<DropdownMenuProps> = ({
linkProps: {
name,
href,
title,
...otherLinkProps
},
children,
...other
}) => {
/**
* Здесь вся логика с citiesOpened, toggleMenuCities и т.п.
*/
return <DropdownMenuStyled
{...other}
>
<a
href={href}
title={title}
onClick={toggleMenuCities}
{...otherLinkProps}
>
{name} <i className="fa fa-angle-down"></i>
</a>
<DropdownSubMenuStyled opened={citiesOpened}>
{children}
</DropdownSubMenuStyled>
</DropdownMenuStyled>;
}
Тогда у тебя получится более гибкий компонент, особенное если ты найдешь способ параметру linkProps задать одной конструкцией все возможные свойства ссылок:-) (Это тебе дополнительное субзадание, которое попытайся решить, но если не получится, то не фанатей).