Математика в скобках
Часть раздела Основы путешествия по React на Coddy — урок 7 из 42.
Фигурные скобки хранят не только переменные: работает любое выражение JavaScript. Математика, методы строк, вызовы функций:
const price = 6;
const quantity = 5;
return <p>Total: {price * quantity}</p>;
// отображает: Total: 30React вычисляет выражение и рендерит результат. Вы можете свободно комбинировать текст и фигурные скобки в одном элементе:
<p>{quantity} items at {price} each</p>Одна вещь, которой НЕ место в фигурных скобках — это инструкции. if, for и их аналоги не являются выражениями. Мы познакомимся с их удобными для JSX альтернативами в одной из следующих глав.
Задание
НовичокСоздайте маленький чек. Компонент определяет price и quantity.
- Сделайте так, чтобы параграф с
id="total"отображалTotal: 30, но вычислите число из переменных с помощью*, а не вводите 30 вручную.
Попробуйте сами
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
Проверьте себяВ этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Основы
1Знакомство с React
Что такое React?Ваш первый компонентПравило одного родителяJSX — это не HTMLИтоги: Знакомство с React2Выражения JSX
Фигурные скобкиМатематика в скобкахСкобки в атрибутахВызов функций в JSXИтоги: Выражения JSX