Два пропса
Часть раздела Основы путешествия по React на Coddy — урок 18 из 42.
Компоненты регулярно принимают несколько пропсов. Перечислите их все при деструктуризации и используйте внутри JSX:
function Product({ name, price }) {
return <p>{name} costs ${price}</p>;
}
<Product name="Laptop" price={999} />
// renders: Laptop costs $999Обратите внимание на типы: name — это строка (в кавычках), price — это число (в фигурных скобках). Сохранение чисел в виде чисел имеет значение, как только вы начинаете проводить с ними вычисления.
Задание
ЛегкоСоздайте линейку товаров для магазина.
- Сделайте так, чтобы компонент
Productпринимал пропсыnameиpriceи отображал{name} costs ${price}в своем абзаце. - В
Appотобразите одинProductсnameсо значениемLaptopиpriceсо значением999(как число!). На странице должно быть отображеноLaptop costs $999.
Попробуйте сами
<!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Итоги: пропсы