propsを使ってデータを渡そう
今回はコンポーネント間でデータを受け渡す方法について見ていきます。
Propsとは
props（プロップス）は、親コンポーネントから子コンポーネントへデータを渡す仕組みです。
- 親から子へ一方向に渡されるデータで、子コンポーネント側でデータを受け取って利用します。
propsの値は子コンポーネント内で変更できない（読み取り専用）。
使い方
では実際に動きを見ていきます。
まずはapp/componentsフォルダに「props.js」ファイルを作成します。
次にpropsを受け取る子コンポーネントを定義します。
ここでは「content」というデータを受け取れるようにしています。
export default function Props(props) {
return <h1>{props.content}</h1>;
}次にapp/page.jsでこのPropsコンポーネントを呼び出します。その際渡したいデータを定義します。
import Props from "./components/props";<Props content="これはpropsで渡ってきたデータです。" />
表示できました。
孫コンポーネントへのデータ継承
次に、親から子、子からさらに孫コンポーネントにデータを継承してみましょう。
まず、app/componentsフォルダに「offSpring」フォルダを作成し、grandChild.jsを作成しGrandChildコンポーネントを定義します。
ここでは「title」というデータを受け取れるようにしています。
export default function GrandChild(props) {
return <h1>{props.title}</h1>;
}
次にapp/componentフォルダにchild.jsを作成し、Childコンポーネントを定義します。
import GrandChild from "./offspring/grandChild";
export default function Child(props) {
return (
<GrandChild title={props.title} />
);
}
最後にapp/page.jsでChildコンポーネントを読み込み、データを渡します。
import Child from "./components/child";<Child title="これはpropsで渡ってきたtitleです。" />
表示されました。
どのような状況で使うのか？
propsでデータを渡す方法を説明してきましたが、具体的にどういった状況で使用するかをまとめました。
- 再利用可能なコンポーネントを作りたいとき。
- 親から子にデータやロジックを渡したいとき。
- 動的なデータを扱いたいとき。
- スタイルや設定を動的に変えたいとき。
いまいちピンとこないかもしれませんが、今はこういうことがある、という風に気に留めておいてもらえばOKです。
複数のデータを渡す場合
これまで渡すデータは１つでしたが、複数ある場合も見ていきましょう
まずはapp/components/offspringフォルダに「multipleGC.js」を作成し、MultipleGCコンポーネントを定義します。ここではpropA,propB,propCを受け取れます。
export default function MultipleGc(props) {
return (
<>
<p>{props.propA}</p>
<p>{props.propB}</p>
<p>{props.propC}</p>
</>
);
}
次にapp/componentsに「multipleCilld.js」を作成しMultipleChildコンポーネントを定義します。
import MultipleGc from "./offspring/multipleGC";
export default function MultipleChild(props) {
return (
<MultipleGc propA={props.propA} propB={props.propB} propC={props.propC} />
);
}
最後にapp/pages.jsでMultipleChildコンポーネントを読み込んで、データを渡します。
import MultipleChild from "./components/multipleChild";<MultipleChild propA="データA" propB="データB" propC="データC" />
表示できました。
ただ、上記のやり方だと
propA="..." propB="..." propC="..." という記述が２回出てきており、コードとしては冗長といえます。
これを回避する方法はいくつかありますが、そのうちの一つである
スプレッド構文
について次回見ていきます。
コメント