169 похожих чатов

Подскажите нубу-недоджуну каким способом лучше реализовать такую задачу: нужно запилить 2

модалки - форму регистрации и форму авторизации.
Они полностью идентичны по стилям и отличаются только количеством инпутов, например в регистрации будут поля: 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>
);
};
Простите за длинный текст. Как поступать лучше поступать в таких
ситуациях?

5 ответов

8 просмотров

Модальное окно - отдельный компонент независимый, форма логина и регистрации - два разных компонента с разными инпутами и т.п. В зависимости от type показывать инпуты - нарушение другого не менее интересного принципа, SRP

В чем именно состоит дублирование? Если совпадают стили - надо делать дженерик компоненты кнопок и ввода (Аля Uikit) и потом из них набирать разные формы

Александр- Автор вопроса
Roman
В чем именно состоит дублирование? Если совпадают ...

Спасибо за ответ. Дублирование состоит в том, что появляются 2 компонента с почти одинаковым кодом.

Как вариант, если верстка одинаковая, то можешь сделать один универсальный компонент, который пропсами будет принимать массив именований, с которых будет формироваться нужное количество инпутов. Я пишу с телефона потому без примера. Идея понятна?

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

Обсуждают сегодня

Какой-то там пердун в 90-х решил, что есть какая-то разная типизация. Кого вообще это волнует?
КТ315
49
void terminal_scroll() { memmove(terminal_buffer, terminal_buffer + VGA_WIDTH, buffer_size - VGA_WIDTH); memset(terminal_buffer + buffer_size - VGA_WIDTH, 0, VGA_WIDTH); ...
Егор
47
Всем привет! Подскажите, пожалуйста, в чем ошибка? Настраиваю подключение к MySQL. Либы лежат рядом с exe. Все как по "учебнику"
Евгений
16
А можете как-то проверить меня по знаниям по ассемблеру?
A A
132
Здравствуйте! У меня появилась возможность купить книгу "Изучай Haskell во имя добра!". Но я где-то слышал, что эта книга устарела. Насколько это правда??
E
22
Здравствуйте! Я вот на stepic решаю задачи на хаскеле https://stepik.org/lesson/8443/step/8?unit=1578 мой код import Data.List (isInfixOf) removing :: String -> [String] ->...
E
10
Камрады, кто тесно работал с vtv, хотел уточнить. Ширина column задаётся жёстко на этапе создания дерева или можно в рантайме ее менять программно (не мышкой)?
Ed Doc
10
да ладно ... что там неочевидного ? глянуть в исх-ки датасета и/или кверика чтобы понять в каком месте и как выполняется обращения к св-вам blablaSQL - минутное дело, даже е...
Сергей
7
Здесь для arm кто-нибудь кодит ?
Nothing
52
Всем привет, у меня есть сервер принимающий входящие HTTP подключения, как проверить, что подключение было через прокси или нет, есть какие то поля в заголовках по которым мо...
Кибер Бомж
8
Карта сайта