Propsの渡しかた
CoddyのReactジャーニー「基本概念」セクションの一部 — レッスン 17/42。
プロップを最初から最後まで接続してみましょう。手順は常に次の3つのステップです：
// 1. それを受け取る
function Greeting({ name }) {
// 2. それを使う
return <p>Hello, {name}!</p>;
}
// 3. それを渡す
<Greeting name="Ada" />文字列は引用符で囲んで渡します。数値と式は波括弧を使用します。これは属性と同じルールです：
<Score points={97} />
チャレンジ
初心者Greeting コンポーネントは渡されたすべてを無視しています。
Greetingがnameprop を受け取り、段落内に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>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。