Скобки в атрибутах
Часть раздела Основы путешествия по React на Coddy — урок 8 из 42.
Фигурные скобки работают и в атрибутах. Замените кавычки на фигурные скобки, и значение атрибута будет браться из JavaScript:
const level = 'warning';
return <p className={level}>Check this!</p>;Теперь класс параграфа соответствует значению переменной: измените level на 'error', и класс изменится вслед за ним. Именно так React-приложения переключают стили на основе данных.
Обратите внимание на синтаксис: className={level}, без кавычек вокруг фигурных скобок. className="{level}" (с кавычками) установит класс равным буквальному тексту {level}.
Задание
ЛегкоПараграф предупреждения должен получать свой CSS-класс из переменной level.
- Установите
classNameпараграфа в значениеlevelс помощью фигурных скобок (его класс должен в итоге статьwarning). - Не вводите слово warning в атрибуте. Используйте переменную.
Попробуйте сами
<!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