В предыдущих задачах вы узнали, как выводить код JavaScript в код JSX, используя фигурные скобки, { }, например, в таких задачах, как доступ к свойствам, передача свойств, доступ к состоянию, вставка комментариев в ваш код и дизайн ваших компонентов. Это все распространенные случаи использования JavaScript в JSX, но это не единственный способ использования кода JavaScript в компонентах React. Вы также можете писать JavaScript непосредственно в своих методах render перед оператором return , не вставляя его внутри фигурных скобок. Это связано с тем, что он еще не находится в коде JSX. Если вы хотите использовать переменную позже в коде JSX внутри оператора return , вы поместите имя переменной внутри фигурных скобок.
Примечание: JSX существует не только в рамках выполнения оператора return. Вообще return тут ничего не определяет более того, как только возврат значения. Границы JSX определяются тегами, написанными с использованием угловых скобок < и >, так же, как теги пишутся в HTML. Для примера:
const string = "Some string value";
const content = <div>String: {string}</div>
return content;Здесь константа content содержит в себе JSX-элемент, и чтобы внутри него вывести значение константы string, пришлось использовать фигурные скобки. В противном случае мы бы получили не значение константы, а простой текст string. То есть расценивайте JSX как шаблонизатор (коих много). Так будет проще и понятней.
В предоставленном коде метод render имеет массив, содержащий 20 фраз, представляющих ответы, найденные в классической игрушке "Magic Eight Ball" 1980-х годов. Событие нажатия кнопки привязано к методу ask, поэтому каждый раз, когда нажимается кнопка, будет генерироваться случайное число и сохраняться как randomIndex в состоянии. В строке 52 удалите строку change me! и переназначьте константу answer, чтобы ваш код произвольно обращался к другому индексу массива
possibleAnswers при каждом обновлении компонента. Наконец, выведите значение константы answer в тег p.