Правило одного родителя
Часть раздела Основы путешествия по React на Coddy — урок 3 из 42.
Компонент может возвращать сколько угодно JSX, но с одним правилом: всё должно находиться внутри одного родительского элемента. Вот отличный пример:
return (
<div>
<h1>My Page</h1>
<p>Welcome!</p>
</div>
);Но возврат двух элементов бок о бок без обёртки приведет к ошибке. Функция может возвращать только что-то одно:
// BROKEN: два элемента верхнего уровня
return (
<h1>My Page</h1>
<p>Welcome!</p>
);Обычное решение — обернуть всё в <div>. Посмотрите на предпросмотр: если вы нарушите правило, ошибка сборки точно покажет, где именно.
Задание
НовичокСоздайте небольшой заголовок страницы: два элемента внутри одного родительского.
- Оставьте внешний
<div>. - Внутри него добавьте
<h1>сid="heading"и текстомMy First App. - Ниже заголовка добавьте
<p>сid="tagline"и текстомBuilt with React.
Попробуйте сами
<!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Итоги: Знакомство с React