React入門 練習問題 51：propsの基礎
次のコードを実行した場合、ボタンをクリックしたときの動作として正しいものはどれですか？
```jsx
import React from 'react';
function ParentComponent() {
const handleClick = (greeting) => {
alert(greeting);
};
return (
<div>
<h1>Propsのデモ</h1>
<ChildComponent
message="ボタンを押してください"
onButtonClick={handleClick}
/>
</div>
);
}
function ChildComponent({ message, onButtonClick }) {
return (
<div>
<p>{message}</p>
<button onClick={() => onButtonClick('こんにちは')}>挨拶する</button>
</div>
);
}
```
- 「ボタンを押してください」というアラートが表示される
- 「こんにちは」というアラートが表示される
- コンソールにエラーが表示される
- 何も起こらない
- 「ボタンを押してください」と「こんにちは」の両方のアラートが順番に表示される
Qraftユーザーの成績：難易度 Dランク（レーティング1113）・正答率 43%（13/30回正解）
レーティングは解いた人の実力と正誤から算出する難しさ（初期値1200）。ランクはその全問題中の順位（S+が最難関、F-が最易）
正解と解説を見る
親コンポーネントから子コンポーネントへ関数をpropsとして渡し、子コンポーネント側でその関数を呼び出す際に引数を渡すことができます。この設問では、ボタンクリック時にonButtonClick('こんにちは')が実行されるため、「こんにちは」というアラートが表示されるのが正しい動作です。
【正解の理由】
ChildComponentのボタンがクリックされると、propsで受け取ったonButtonClick関数（実体はParentComponentのhandleClick）が'こんにちは'という引数付きで呼び出されます。handleClickはその引数をそのままalertで表示するため、「こんにちは」が表示されます。
【不正解の理由】
• 「『ボタンを押してください』というアラートが表示される」：この文字列はmessage propとして<p>に表示されるだけで、alertには渡されていません。
• 「コンソールにエラーが表示される」：propsの受け渡しは正しく行われており、構文・論理エラーはありません。
• 「何も起こらない」：onClickハンドラが正しく設定されているため、クリックすると必ずalertが実行されます。
• 「両方のアラートが順番に表示される」：alertはhandleClick内で1回しか呼び出されていないため、複数のアラートが表示されることはありません。