@0x80070005

Как правильно разделить блок на компоненты?

Имеется такая часть макета, не могу понять как правильно сделать компонент. Моя реализация падает на такой вариант: будет компонент AppearanceHeader - это отображение нашего текста (props: Title), будет компонент ThemeOption - это наша карточка выбора темы (Props: id_темы, label, onSelect, isSelect) и будет общий компонент Appearance в котором мы подключим все наши дочерние компоненты и этот общий компонент мы уже выводим на страницу. Моя логика верна? Да, блок сам не большой и можно сделать одним общим компонентом, но я продумываю все заранее, вдруг что-то захочу добавить. Иначе смысл от этих компонентов если можно их добавить после новой идеи.

Структуру:
components
• Appearance
•• AppearanceHeader
••• index.js
•• ThemeOption
••• index.js
•• index.js

674805931936b477991034.jpeg
  • Вопрос задан
  • 49 просмотров
Пригласить эксперта
Ответы на вопрос 1
alexey-m-ukolov
@alexey-m-ukolov Куратор тега React
Иначе смысл от этих компонентов если можно их добавить после новой идеи.
Сначала нужно сделать просто и понятно. Потом, при необходимости, уже усложнять. Заранее усложнять себе жизнь совершенно ни к чему.

Есть две основные причины выделения компонента: возможность переиспользования и скрытие сложности. В данном случае сложности никакой нет, поэтому не будем брать её в расчёт.
Давайте посмотрим на предложенную вами структуру с точки зрения переиспользования. У вас название компонента жёстко привязано к его содержимому, следовательно, переиспользовать его можно будет только если у вас в каком-то другом месте будет ровно такой же блок. То есть переиспользуемость невелика.

А вот если мы скажем, что это компонент SettingsControl, например, у которого есть title и children (а в них может быть что угодно), то сможем переиспользовать блок для всех остальных настроек. Но, может, этот дизайн используется не только в настройках, а вообще по всему проекту - тогда разделение и именование будет уже другим.
Сам контрол тоже можно обобщить до RadioInputWithImages - тогда, если у вас в каком-то другом месте будет похожий контрол выбора котят, а не темы приложения, вы просто поменяете контент, а логика и вёрстка будут переиспользованы.

В целом, предметно обсуждать деление на компоненты по огрызку одного макета невозможно - это холистический процесс.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы