День 4 #100DaysOfCoding. Сегодня я продолжаю свое путешествие по React. На этой неделе мы узнали об условном рендеринге и типах реквизита.
Условная визуализация
Условный рендеринг используется, когда вы хотите отобразить данные для пользователя, но только при выполнении определенного условия.
Этот фрагмент JSX представляет собой условный рендеринг. В левой части оператора && у нас есть условие, которое должно возвращать истинное логическое значение. Если условие возвращает истинное логическое значение, оно отобразит тег JSX справа от оператора &&.
В этом случае мы смотрим на объект состояния внутри нашего компонента. Внутри объекта состояния у нас есть свойство ошибки, которое содержит строку, если в состоянии приложения произошла ошибка. Оператор двойного удара ‘!!’ указывает, что мы хотим проверить свойство error, чтобы убедиться, что оно истинно и содержит ли оно что-либо вообще. Если это так, мы хотим вернуть тег h2 с интерполированным сообщением об ошибке в DOM, чтобы пользователь мог прочитать ошибку.
Оператор ‘&&’ немного отличается от того, что я привык видеть. В большинстве случаев оператор «&&» указывает, что мы хотим, чтобы оба условия в левой и правой частях оператора возвращали значение true. Однако в этом случае мы хотим оценить только левую часть оператора. Кое-что, о чем следует помнить, поскольку я продолжаю применять условный рендеринг в своих собственных приложениях.
Типы объектов
По мере роста приложений может легко появиться много ошибок. Наше приложение может рухнуть, если мы передаем через реквизит неверные типы данных. Чтобы исправить это, пригодятся типы реквизита. Типы реквизитов — это библиотека, поэтому нам всегда нужно помнить об импорте этой библиотеки в начало файла!
Мы можем проверить, относятся ли наши реквизиты к какому-либо типу данных. Мы даже можем проверить, является ли переданная поддержка функцией.
Вот пример реализации типов пропсов в текущем проекте, над которым я работаю. В нашем компоненте MoviePage мы передаем реквизиты из нашего компонента App в наш единственный компонент Movie. Единому компоненту «Фильм» нужны эти специальные реквизиты, чтобы пользователь мог просматривать детали, когда щелкает постер фильма. Вы можете заметить, что мы также передали функцию goBack, необходимую нам для возврата на главный экран, так что это не просто проверка примитивных типов данных.
Этого достаточно на сегодня. Увидимся завтра!
