Как отобразить и скрыть элементы в React

Как отобразить и скрыть элементы в React

От автора: без операторов if в JSX, как вы управляете потоком приложения? Давайте рассмотрим, как отображать или НЕ отображать элементы в React.

Вы не можете вставлять оператор if в JSX. Итак, как вы контролируете, что отображается? Управление потоком через приложение имеет фундаментальное значение для программирования, и для React это ничем не отличается. В этой статье мы собираемся ответить на вопрос: как мне отобразить или скрыть что-то в React?

Я начал мозговой штурм, как по-разному отображать и скрывать вещи в React, и оказывается, что существует больше способов, чем вы думаете! Мы расскажем о плюсах и минусах каждого подхода и о том, как вы можете проверить наличие элемента с помощью библиотеки React Testing.

Полный исходный код можно найти здесь.

Возвращение Null

В современном React компонент — это не что иное, как функция, задачей которой является возвращение значения, которое должно быть отображено. Как и обычные функции, функциональные компоненты могут иметь несколько возвращаемых значений. Если то, что предоставляет компонент, представляет собой ситуацию «все или ничего», самый простой способ контролировать, отображается ли элемент, состоит в том, чтобы вообще не возвращать JSX, а вместо этого вернуть null.

Поскольку оператор if не встроен в JSX, а является частью обычной JavaScript-функции, вы можете использовать любую конструкцию JS, которая вам нравится. В этом примере, если продукт недоступен, мы просто возвращаем null.

Троичный оператор

Когда вам нужно контролировать, отображается один элемент или другой, или даже вообще ничего (null), вы можете использовать троичный оператор, встроенный в JSX.

В этом случае, если товаров не осталось, мы отобразим «Sold Out»; в противном случае мы будем отображать количество оставшихся товаров.

Ярлык

Если вы хотите отобразить что-то только в том случае, если значение равно true, а, если результат false, ничего не должно отображаться, то лучше использовать ярлык, вместо null в части false троичного оператора. Это включает в себя использование условного оператора внутри JSX, который выглядит следующим образом checkIfTrue && <span>display if true</span>. Потому что, если операторы, использующие операнды &&, останавливаются, когда находят первое значение, которое оценивается как ложное, они не достигнут правой части (JSX), если левая часть уравнения оценивается как ложная.

Давайте посмотрим на это в действии! Мы будем отображать остальную часть названия продукта, только если у для него есть, что отображать:

Я должен отметить, что это вызывает проблемы в React Native, он не знает, как обрабатывать false во время вывода, и в итоге вызывает ошибку. В React Native вы должны использовать троичный оператор с возвращением null в случае false:

Использование свойства стиля

До этого момента мы выбирали между отображением и не отображением элемента. Что, если мы хотим отобразить элемент, но он должен быть невидимым? На данный момент у нас есть несколько вариантов. Первый — это непосредственное изменение HTML-свойства элемента style, установка атрибутов CSS, таких как display и opacity. В этом коротком примере мы устанавливаем для свойства display значения block или none, в зависимости от значения, содержащегося в showInfo. Еще раз, троичный оператор используется внутри встроенного JSX для управления потоком приложения.

Модификация CSS-классов

По тому же принципу, что и изменение атрибутов style, мы можем изменить у элемента класс, что дает нам возможность контролировать display и opacity элемента или даже убирать его в сторону, как меню гамбургера, когда оно находится в закрытом состоянии.

В приведенном ниже примере элемент nav находится с левой стороны экрана left: -200px, но когда к элементу nav добавляется класс open, он переводится к left: 0px и внезапно снова становится видимым.

Мы можем переключать этот класс CSS, используя состояние, которое переключается внутри onClick кнопки (гамбургер), выбирая добавить класс или нет с помощью троичного условия className={open ? «open» : null}.

Анимация видимости с помощью react-spring

Вместо того чтобы самим манипулировать классами и атрибутами стиля, мы можем обратиться к сторонней библиотеке, которая сделает это за нас. В этом случае мы используем react-spring, которая может переключать любой числовой атрибут CSS, используя свойства, основанные на физике, такие как mass, tension, и friction. Если это не совсем очевидно для вас (как, разумеется, в свое время было и для меня!), есть удобный визуализатор, который поможет вам правильно настроить параметры.

Просто оберните в пользовательский компонентом SpringIn любое содержимое — <SpringIn><div>any content</div></SpringIn> — и вы сможете задать для этого компонента анимацию react-spring.

Проверка существования с помощью библиотеки React Testing

Тестирование должно быть важной частью вашего процесса разработки React, и с помощью React Testing Library мы можем проверить наличие или отсутствие визуализируемого элемента.

В первом примере используется getByText, чтобы найти элемент, и мы ожидаем toBeInTheDocument. Тогда как во втором примере используется queryByText, чтобы проверить toBeNull. Мы переключились с getByText на queryByText, потому что getByText вызовем ошибку, если не сможем найти элемент, но во втором примере это именно то, что мы ожидаем найти!

Проверка классов с помощью React Testing Library

Мы также можем использовать React Testing Library, чтобы проверить, имеет ли элемент определенный класс CSS или нет. В приведенном ниже примере nav изначально скрыт, что означает, что у него нет класса open, но после переключения состояния мы можем видеть, что у него есть класс open.

Заключение

В этой статье мы рассмотрели шесть различных способов отобразить или скрыть элемент в React. Иногда мы хотим, чтобы он совсем не отображался, а иногда нам нужно, чтобы он отображался, но был невидим. Для этого мы использовали атрибуты стиля и классы CSS. Наконец, мы использовали React Testing Library, чтобы убедиться, что определенный элемент был правильно отображен или не отображен.

Автор: Leigh Halliday

Источник: //www.telerik.com

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: