こんにちは、はるです.
所属している「もりけん塾」でReact課題に取り組んでいます.
問題文やレビュー内容は非公開なので、課題で調べたことをまとめることにしました.
初心者の学習ノートなので、認識の間違えている点がありましたらお問い合わせからご指摘いただけるとうれしいです.
親から子に値を渡す
親から子に値を渡すにはpropsを使用すれば簡単だった.(復習)
親コンポーネント（Parent）が子コンポーネント（Child）に文字列を渡す例を考える.
// 親コンポーネント
const Parent = () => {
return <Child message="こんにちは!" />;
};
// 子コンポーネント
const Child = ({message}) => {
return <h1>{message}</h1>;
};
export default Parent;ParentでChildコンポーネントを使用する際にpropsで値を渡し、それをChildコンポーネントで受け取る.
子から親に値を渡す
子から親へ値を渡す場合は少し工夫が必要だった.
結論: 親コンポーネントが子に関数を渡し、子コンポーネントがその関数を呼び出す流れ
子から親に値を送る例を考えてみる👀
以下の例では、子コンポーネント（Child）がボタンクリック時に親コンポーネント（Parent）にデータを送り返す.
stateの名前など適当です.. 問題文は非公開なので、それ以外で自分で例考えてみるのってとても難しいと思った…😅
import { useState } from 'react';
// 親コンポーネント
const Parent = () => {
// 親のstateを宣言
const [parentData, setParentData] = useState('');
const handleDataFromChild = data => {
// 子から送られたデータでstateを更新
setParentData(data);
};
return (
<div>
<Child sendData={handleDataFromChild} />
<p>子コンポーネントからのデータ: {parentData}</p>
</div>
);
};
// 子コンポーネント
const Child = ({ sendData }) => {
const data = "子コンポーネントのデータ";
return <button onClick={() => sendData(data)}>データを親に送る</button>;
};
export default Parent;親コンポーネントで子を使用する際に、propsで関数を渡す.
<Child sendData={handleDataFromChild} />
関数を子で受け取り、buttonがクリックされたときにdataをセットしてその関数を実行するようにする.
結果、dataを親に送って使用することができた.
// 子コンポーネント
const Child = ({ sendData }) => { //ここで関数を受け取る
const data = "子コンポーネントのデータ";// dataをセットして関数を使用する
return <button onClick={() => sendData(data)}>データを親に送る</button>;
};今回の例だと、setParentData()で新しいdataを置き換えているので、Stateの値がdataに更新される.
const handleDataFromChild = data => {
// 子から送られたデータでstateを更新
setParentData(data);
};このように値の伝搬だけでなく、それに伴ってstateの値を更新することもできる.
まとめ
公式ドキュメントでうまく情報を探せず… さまざまな記事やYouTubeで学習を進めました…ありがとうございます.
引き続きReactの基礎を学んでいきます !
💡もりけん塾で勉強しています .. JavaScriptを一緒に勉強する塾生さん募集中です💡
もりけんさん(@terrace_tec)のHPはこちら
