Вызов функций в JSX
Часть раздела Основы путешествия по React на Coddy — урок 9 из 42.
Поскольку фигурные скобки принимают любое выражение, они также принимают вызовы функций. Определите вспомогательную функцию над компонентом и вызовите её прямо в разметке:
function shout(text) {
return text.toUpperCase() + '!';
}
export default function App() {
return <h1>{shout('hello')}</h1>;
// отображает: HELLO!
}Это делает компоненты читаемыми: разметка показывает, что отображается, а вспомогательные функции — как оно вычисляется. Строковые методы также работают напрямую:
<p>{name.toUpperCase()}</p>
Задание
ЛегкоВспомогательная функция fullName формирует отображаемое имя из двух частей, но её никто не вызывает.
- Сделайте так, чтобы абзац с
id="author"отображал результат вызоваfullName('Grace', 'Hopper'): он должен показыватьGrace Hopper.
Попробуйте сами
<!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