@Persotr27

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

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

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

Надеюсь вопрос понятен. Что посоветуете?
  • Вопрос задан
  • 50 просмотров
Пригласить эксперта
Ответы на вопрос 2
insighter
@insighter
-First time? - Huh? (C#, React, JS)
Если есть опыт разработки 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>)
}
Ответ написан
Комментировать
y0u
@y0u
dev
Почитайте про Compound components, Hooks и React Context. В итоге сможете собрать примерно то, что задумали.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы