модалки - форму регистрации и форму авторизации.
Они полностью идентичны по стилям и отличаются только количеством инпутов, например в регистрации будут поля: login, email, password, а в авторизации пусть будут только login и password.
Я вижу 3 способа выполнить эту задачу:
1. Сделать 2 разных компонента, допустим, SignInModal и SignUpModal.
Я видел, что разрабы юзают такой подход, но есть одно большое НО, имя которому DRY.
Дублирование кода - зло (ваш КЭП). Форму с авторизацией я взял для примера,
на самом деле, мне интересно как в принципе лучше поступать в ситуациях,
когда есть 2 или больше очень похожих компонента. Гипотетически, их может
быть 3 или 4 или 10 и тогда каждый раз создавать новый компонент - совсем гиблое дело
2. Прокидывать инпуты из контейнерного компонента с помощью children.
Дублирование кода никуда не денется, но зато будет всего 1 компонент.
3. Создать компонент, прокидывать через пропсы какой-нибудь type и
в зависимости от type показывать инпуты. Выглядеть это будет примерно так
const LoginModal = ({type, callbacks, otherProps}) => {
return (
<div>
<input placholder='login' />
{type === 'signUp' && <input placholder='email' />}
<input placholder='password' />
<button>submit</button>
</div>
);
};
Простите за длинный текст. Как поступать лучше поступать в таких
ситуациях?
Модальное окно - отдельный компонент независимый, форма логина и регистрации - два разных компонента с разными инпутами и т.п. В зависимости от type показывать инпуты - нарушение другого не менее интересного принципа, SRP
В чем именно состоит дублирование? Если совпадают стили - надо делать дженерик компоненты кнопок и ввода (Аля Uikit) и потом из них набирать разные формы
Спасибо за ответ. Дублирование состоит в том, что появляются 2 компонента с почти одинаковым кодом.
Как вариант, если верстка одинаковая, то можешь сделать один универсальный компонент, который пропсами будет принимать массив именований, с которых будет формироваться нужное количество инпутов. Я пишу с телефона потому без примера. Идея понятна?
Обсуждают сегодня