Рендеринг в зависимости от переданных свойств
До сих пор вы видели, как использовать if/else, && и тернарный оператор для принятия условных решений о том, что и когда отображать. Однако остается обсудить еще одну важную тему, которая позволяет комбинировать любую или все эти концепции с другой мощной функцией React: свойства. Использование свойств для условного рендеринга кода очень распространено среди разработчиков React - то есть они используют значения свойств для автоматического принятия решений о том, что рендерить.
В этой задаче вы настроите дочерний компонент для принятия решений о рендеринге на основе свойств. Вы также будете использовать тернарный оператор, но вы можете увидеть, как некоторые из других концепций, которые были рассмотрены в последних нескольких задачах, могут быть столь же полезными в этом контексте.
В редакторе кода есть два компонента, которые частично определены для вас: родительский элемент с именем GameOfChance и
дочерний элемент с именем Results. Они используются для создания простой игры, в которой пользователь нажимает кнопку,
чтобы увидеть, выиграет он или проиграет.
Во-первых, вам понадобится простое выражение, которое при каждом запуске случайным образом возвращает другое значение.
Вы можете использовать Math.random(). Этот метод при каждом вызове возвращает значение от 0 (включительно) до 1
(исключая). Поэтому для шансов 50/50 используйте в выражении Math.random() >= .5. Статистически это выражение вернет истину в 50% случаев и ложь в остальных 50%. В методе рендеринга замените null приведенным выше выражением, чтобы завершить объявление переменной.
Теперь у вас есть выражение, которое можно использовать для принятия случайного решения в коде. Далее вам нужно это
реализовать. Визуализируйте компонент Results как дочерний для GameOfChance и передайте выражение как свойство с именем
fiftyFifty. В компоненте Results напишите тернарное выражение для визуализации элемента h1 с текстом You Win! или You Lose! на основе свойства fiftyFifty, который передается от GameOfChance. Наконец, убедитесь, что
метод handleClick() правильно считает каждый ход, чтобы пользователь знал, сколько раз он сыграл. Это также позволяет пользователю узнать, что компонент действительно обновился, на случай, если он выиграет или проиграет дважды подряд.