Разделение кнопок по функциям
У меня есть 5 кнопок сверху экрана 1 слева отвечает за переход на страницу профиля, 4 маленьких справа отвечают за (1,2 - переход по ссылкам (тг и ютуб), 3 при нажатии на нее выводит правила пользования, 4 дает возможность выбрать язык). То есть я правильно понимаю что эти кнопки стоит разбить на несколько компонентов? Например 3 и 4 отделить от остальных, и на сколько это будет правильным?
Ответы (1 шт):
Вообще это может быть один компонент кнопки, который принимает некую callback функцию, которая будет выполнять действие. Каждая функция должна на родительском компоненте для управления состоянием дочерних компонентов. Но если решать под вашу задачу, то можно сделать так:
Кнопки 1, 2 это кнопки ссылки. Это могут быть отдельные компоненты со своей стилизацией. Если вы используете TypeScript, они могут принимать одинаковый тип callback функции или props. Это может быть компонент типа link-button.
Кнопка 3 это popup (на сколько я понял). У неё может быть другая стилизация. Так как действие, которое будет выполняться, отличается от кнопок 1 и 2, это может быть отдельный компонент типа popup-button
Кнопка 4 больше похожа на drop-down menu. Соответственно, стилизация другая, функционал другой. Значит - отдельный компонент
UPD:
Если вы пишете систему с полностью кастомными компонентами, тут нужно будет углубиться в наследование. По факту, только 3й компонент у вас может быть типа Button. 4-й в зависимости от логики, которую вы хотите или вам нужно реализовать, потому что dropdawn компоненты бывают очень разными. Для 1го и 2го компонента я бы использовал <a>, т.е. это ссылка на внешний или внутренний ресурс/страницу.
Такой подход позволит вам раздели кнопки по типам и использовать их многократно без лишних настроек или сложной конфигурации при каждом использовании