Проп children
Часть раздела Основы путешествия по React на Coddy — урок 20 из 42.
Один проп особенный. Напишите компонент с открывающим И закрывающим тегом, и всё, что вы вложите между ними, передастся как проп children:
function Card({ children }) {
return <div className="card">{children}</div>;
}
<Card>
<p>Any content!</p>
</Card>Card не знает и не беспокоится о том, что находится внутри: он просто обертывает это в стилизованный блок. Обертки, такие как карточки, модальные окна и макеты, используют children: родитель предоставляет контент, а компонент — рамку.
Задание
СреднеСоздайте переиспользуемый каркас карточки.
- Сделайте так, чтобы
Cardрендерил<div>сclassName="card", который отображает своиchildren. - В
Appиспользуйте<Card>...</Card>, чтобы обернуть<p>сid="card-text"и текстомWelcome aboard.
Попробуйте сами
<!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Итоги: пропсы