@KononovD

Как валидировать пропсы?

Доброго времени суток.
Пока изучал React написал самопальную карусель. И я думал, что я самый хитрый и когда получал пропсы в componentWillMout я их валидировал, правил если надо и писал в стейт. Только потом я узнал что пропсы писать в стейт - плохая затея.

Карусель может принимать такие св-ва:

itemsToShow - сколько показывать слайдов в строке
itemsToScroll - по сколько слайдов перелистывать
height - высота карусели в пикселях ( если у нас слайдер картинок )
slides - собственно массив реакт-элементов
isLoop - перелистывание последнего элемента вернет в начало, перелистывание первого - в конец
isInfinity - можно листать в одну сторону бесконечно
speed - количество мс которые нужны для перелистывания
isArrowsShow - показывать ли стандартные стрелки
isDotsShow - показывать ли кнопки-точки
isVertical - листать влево/вправо или вверх/вниз
itemsInRow - аналог itemsToShow для вертикального слайдера
isAutoplay - автовоспроизвдение
stopAutoplayOnHover - останавливать ли автоплей по наведению мыши
isDraggable - будет ли листаться карусель мышкой/пальцем

У всех полей есть дефолтные значения

Валидация заключалась в том, что бы карусель в любых условиях работала корректно.
Например:

если на вход пришел пустой массив/ не массив - в консоль кидаем варнинг и ничего не рисуем;
itemsToShow > slides.length ? itemsToShow = slides.length + варнинг в консоль;
itemsToScroll > itemsToShow ? itemsToScroll = itemsToShow + варнинг;
isInfinity ? slides = [ ...lastItems, ...slides, ...firstItems ] ( в начало добавляем слайды с конца, в конец из начала что бы реализовать бесконечный слайдер )

из-за подобных валидаций даже если мы скажем карусели "показывай по 5", а дадим ей 4 слайда - она покажет 4, а не 4 и пустое место под 5й слайд. Подмена пропсов на лету тоже работает.
например такая строка будет работать: itemsToShow={ innerWidth < 1700 ? innerWidth > 1000 ? 4 : 2 : 5 }
Карусель поменяет кол-во отображаемых слайдов.

И из-за всей этой логики код внутри страшный, но сама карусель работает хорошо.
Сейчас пришлось учить TS. В рамках обучения решил переписать свою карусель на TS.

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

Как правильно проводить такую валидацию?

Спасибо что прочитали все эти буквы :D
  • Вопрос задан
  • 226 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

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