Как сделать разнообразный по данным но с общим функционалом реакт компонент?

Question

[Persotr27]

Всем привет. У меня есть реакт компонент - форма. Форма может иметь разные типы полей и их количество. К примеру, одна форма может иметь 2 текст интупа, 3 радио баттота, вторая - не иметь сових текст импутов вовсе, но иметь файлоприемник, третья состоять из чекбоксов. И таких разных типов форм, к примеру, имеется 12. Важная черта - у них всех есть несколько общих обязательных полей. Интерфейс у них должен быть визуально одинаковый, а также имеется некий общий функционал. На отправку формы, независимо от её типа, я хочу что-то сделать с данными (которые могут быть разные), обработать их одинаково.

Как организовать такой компонент? Самый простой вариант, через множество switch caseов, это избавит от необходимости создания для каждого типа формы отдельного флова и компонента, и дублирования кода общего функционала, но тем не менее, такой компонент может быть избыточен.

Надеюсь вопрос понятен. Что посоветуете?

Answer 1

[insighter]

Если есть опыт разработки gui приложений на десктопе, то в Реакт эти подходы лучше не тащить. Здесь повторное использование кода возможно (одно не исключает другое):
1. Через хуки
2. Через декорирование компонент

Например, есть некий action bar с кнопками "записать", "отменить" и хочется типа унаследоваться от него и добавить кнопку "помощь".

function ActionBar({children}){
return(<div>
  <button>Cancel<button/>
  <button>Save<button/>
  {children}  // -- здесь будут размещены "дочерние" компоненты
</div>)
}

Пример использования

function ActionBarWithHelp(){
return(
  <ActionBar>
    <button>Help<button/>
  </ActionBar>
</div>)
}

Answer 2

[y0u]

Почитайте про Compound components, Hooks и React Context. В итоге сможете собрать примерно то, что задумали.