1つの親要素のルール
CoddyのReactジャーニー「基本概念」セクションの一部 — レッスン 3/42。
コンポーネントは好きなだけ多くの JSX を返すことができますが、1つのルールがあります。すべてが 1つの親要素 の中に収まっていなければなりません。以下は問題ありません:
return (
<div>
<h1>My Page</h1>
<p>Welcome!</p>
</div>
);しかし、ラッパーなしで2つの elements を並べて return することはエラーになります。function は 1つ のものしか return できません:
// BROKEN: 2つのトップレベル要素
return (
<h1>My Page</h1>
<p>Welcome!</p>
);通常の解決策は、すべてを <div> でラップすることです。プレビューを確認してください。ルールに違反した場合、ビルドエラーによって正確な場所が知らされます。
チャレンジ
初心者小さなページヘッダーを作成します：1つの親要素の中に2つの要素を配置します。
- 外側の
<div>はそのまま維持します。 - その中に
id="heading"とテキストMy First Appを持つ<h1>を追加します。 - 見出しの下に
id="tagline"とテキストBuilt with Reactを持つ<p>を追加します。
自分で試してみよう
<!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>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。