Знаете ли вы, что в 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 из них.