Передача пропсов
Часть раздела Основы путешествия по React на Coddy — урок 17 из 42.
Давайте свяжем проп от начала до конца. Три шага, всегда одинаковых:
// 1. получите его
function Greeting({ name }) {
// 2. используйте его
return <p>Hello, {name}!</p>;
}
// 3. передайте его
<Greeting name="Ada" />Строки передаются в кавычках. Для чисел и выражений используются фигурные скобки — то же правило, что и для атрибутов:
<Score points={97} />
Задание
НовичокКомпонент Greeting игнорирует всё, что вы ему передаёте.
- Сделайте так, чтобы
Greetingполучал пропnameи рендерилHello, {name}!в своём абзаце. - В
Appпередайтеname="Ada", чтобы на странице отображалосьHello, Ada!.
Попробуйте сами
<!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Итоги: Знакомство с React4Пропсы (Props)
Что такое пропсы?Передача пропсовДва пропсаТот же компонент, новые данныеПроп childrenИтоги: пропсы