Знаете ли вы, что в React (JSX) можно использовать операторы switch? В этой статье объясняется, как выйти за рамки тернарного оператора и использовать операторы switch в React.

В недавнем проекте мне потребовался условный рендеринг помимо двоичной опции, которую предлагают тернарные операторы. Обычно бинарный вариант работает нормально. Например, отобразите форму, а затем отобразите сообщение с благодарностью после ее отправки. Однако мне нужно было включить некоторую логистику игрового потока, чтобы отрендерить 1 из 4 компонентов на основе состояния условно. Я быстро понял, что React не любит операторы If-Else в JSX. Причина объясняется здесь: https://react-cn.github.io/react/tips/if-else-in-JSX.html.

if-else операторы не работают внутри JSX. Это потому, что JSX - это просто синтаксический сахар для вызовов функций и создания объектов.

Во-вторых, если я объединяю 4 компонента в логический блок if (state.value === 'value1') else if (state.value === 'value2') else if (state.value === 'value3') else …, это начинает становиться неуклюжим и трудным для понимания. Как и в случае с обычным JavaScript в приложении React, вы можете включить оператор Switch, чтобы очистить свой код. Кроме того, вы можете иметь оператор switch в JSX. Все, что вам нужно сделать, это обернуть его в самозапускающуюся функцию, иначе известную как выражение немедленного вызова функции (IIFE). Подробнее об этом можно прочитать здесь: https://developer.mozilla.org/en-US/docs/Glossary/IIFE

Как включить оператор switch в ваш проект React

После ответа на вопрос «почему» мы углубимся в включение оператора switch в демонстрационный проект React. Для этой демонстрации мы построим базовую структуру игры. Хотя, в отличие от реальной игры, все наши изменения состояния будут вызваны событиями щелчка. Также обратите внимание, что эта демонстрация написана в функциональном формате React, а не в формате на основе классов, если он кажется отличным от того, что вы привыкли видеть.

В вашем терминале в папке проекта введите:

npm create-react-app switch-demo

Это построит наш скелет React Application. Затем нам нужно создать некоторые компоненты, которые мы будем условно отображать в файле App.js. В том же окне терминала введите:

cd switch-demo/src
mkDir components
touch components/Lost.js
touch components/Playing.js
touch components/Start.js
touch components/Won.js

Итак, теперь у нас есть файловая структура. Итак, мы можем пойти дальше и открыть App.js в текстовом редакторе. И отредактируйте верхнюю часть файла, чтобы импортировать useState и все наши компоненты.

Затем давайте изменим функцию App(). Когда вы создаете свое приложение React, будет какой-то код по умолчанию. Удалите это. То, что у вас должно получиться на этом этапе, находится ниже. Мы настраиваем наши useState и handleClick() для обработки событий щелчка. Внутри handleClick() мы будем setState () для game

Хорошо, теперь в пределах <div className="App"> от App.js добавьте небольшой глобальный заголовок и наш оператор switch.

Давайте разберемся, что здесь происходит в инструкции switch. В строке 7 объявлена ​​условная переменная. Для нас это константа, которую мы объявили для State game. Таким образом, он просматривает кейсы и спрашивает, делает game === 'start’, делает game === 'playing' и т. Д. Если game совпадает с одним из кейсов, он отображает этот компонент, если не возвращается null. Кроме того, для правильной работы оператора switch требуется default:.

В строках 6 и 19 в GitHub Gist вы можете спросить себя, что случилось со всеми этими круглыми скобками? Это форматирование для наличия функции самозапуска, упомянутой ранее в качестве требования, если вы решите иметь оператор switch в JSX.

// Self-invoking function
( () => {
  // do something here
})()
Can also be written as:
( function() {
  // do something here
})()

Итак, файл completeApp.js должен выглядеть так

Итак, чтобы эта демонстрация действительно работала, нам нужно собрать компоненты, поскольку они в настоящее время являются пустыми файлами. Хотя мы не будем ничего к ним добавлять, поскольку нам нужно что-то отрендерить для подтверждения концепции, поэтому все, что они содержат, - это заголовок и одна или несколько кнопок, у которых есть прослушиватель событий для onClick(), который вызывает переданную функцию handleClick(), которая setState() для game

Просто скопируйте и вставьте код в нужные файлы:

Lost.js

Playing.js

Start.js

Won.js

Ой, вот и все для программирования. Сохраните все и направьте свой терминал в корневой каталог вашего приложения React, затем введите команду.

npm start

Теперь у вас должна быть функциональная демонстрация оператора switch.

В заключение, вот как вы можете включить операторы switch в React. Операторы switch позволяют выполнять условный рендеринг, выходящий за рамки логических значений. Они наиболее полезны для сценариев, когда вам нужно иметь 3 или более компонентов, условно визуализируемых, при одновременном отображении только 1 из них.