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

Question

[0x80070005]

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

Структуру:

components
• Appearance
•• AppearanceHeader
••• index.js
•• ThemeOption
••• index.js
•• index.js

Answer 1

[Алексей Уколов]

Иначе смысл от этих компонентов если можно их добавить после новой идеи.

Сначала нужно сделать просто и понятно. Потом, при необходимости, уже усложнять. Заранее усложнять себе жизнь совершенно ни к чему.

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

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

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

Comments

[0x80070005]

То бишь, SettingsControl у нас главный компонент, который принимает в себя название секции, описание секции и children, в котором мы передаем уже наши другие компоненты, по типу выбора темы и тд, верно? Часть этого макета по сути не отличается от других секций. Все также имеют название секции, описание и сам элемент. По типу, иконка слева, текст и справа чекбокс, ну или такие элементы выбора как темы

[0x80070005]

Вот пример макета

[Алексей Уколов]

То бишь

Да. Не знаю что такое "главный" компонент, но всё остальное верно.

[0x80070005]

Верно?

<div className="app-appearance">
      <h2>App Appearance</h2>
      
      <SettingsControl title="Theme">
        <RadioInputWithImages options={themeOptions} selectedValue={theme} onChange={setTheme} />
      </SettingsControl>
      
      <SettingsControl title="Highlight Color">
        <ColorPicker options={colorOptions} selectedColor={highlightColor} onChange={setHighlightColor} />
      </SettingsControl>
      
      <SettingsControl title="Text">
        <SettingsLink label="Font" value="System" onClick={() => alert("Change font")} />
      </SettingsControl>
      
      <SettingsControl title="Animation">
        <SettingsLink label="Page Transition" value="Move In" onClick={() => alert("Change transition")} />
        <SettingsLink label="Animation Speed" value="Normal" onClick={() => alert("Change speed")} />
      </SettingsControl>
    </div>

[0x80070005]

Алексей Уколов, выше накидал пример :)