🔰

Reactを勉強して #2

2023/09/04に公開4件

React

tech

はじめ

今回お話すること Propsについて です。

Children Propsやコンポーネント間のデータの受け渡しについて話せていけたらと思っています。

コンポーネント間のデータの受け渡しについては色々なパターンを説明したいと思います。

コンポーネント間のデータの受け渡し（引数の場合)

コンポーネントにデータを送るにはPropsを使用します。
今回はString型にしていますが、number型など他の型を入れることもできます。

表示の仕方としては引数名を{}で囲むことで使うことができます。

子コンポーネント（ここではPosts.jsx)のpropsも{}で囲まないと画面に表示されない

結果

複数でも同じ

結果

コンポーネント間のデータの受け渡し(引数が配列の場合)

今までのはややこしくないですが、配列から「ん？」ってなる人が出てくるかもしれません。
配列の表示には簡単に分けると2つあります。

パターン１：Mapメソッドで配列の回す
Reactでは配列を回すときにはMapを使用します。
Mapを使うメリットとして大きく２つにあります。

配列の要素全てを表示
戻り値として新しい配列を返す

Mapメソッドで表示させる時の注意点としてReactではどの要素が変更されたか識別するためにkeyを入れることを推奨としています。
実際にKeyなしでも動いているように見えるかも知れないですが、Google Chromeの開発者ツール(F12キー）を押すと下の画像のようにエラーが出ている。

パターン２：{}で表示させる
これは最初の引数が一つの場合と同じで{}で囲むことで全件表示させることができる。

結果

コンポーネント間のデータの受け渡し(連想配列の場合)

簡単な表示は配列でもできたかも知れないですが、データベースから取得する際に一つのテーブルの１カラムから受け取ることは稀だと思います。基本的には複数カラムから受け取ると思いますが、その時には連想配列で受け取ることが多いと思います。

連想配列の表示方法はMapメソッドを使ってカラム毎に分割して表示させることができます。１つ前の配列のときのようにPropsを{}で囲んで表示させても下の画像のように開発者ツールでエラーが出てしまいます。

このエラーの意味は{title,category,comment}のどれをここで表示させたいの？って言ってます。
なのでMapで回したものを回したい連想配列.表示させたいカラムのように書くと表示することができます。

結果

Children Props

ReactはコンポーネントをPropsとして使うことができます。Childrenを使う方法はChildrenPropsとして使いたいコンポーネント（子）に適当な引数を入れて、入れたいコンポーネント（親）の中で{適当な引数}を書くことでできます。

結果

Childrenはいつ必要？

「こんな書き方しなくてもいいじゃん。面倒だし」って思う人もいると思います。

実際に最初の頃は私も思っていましたが後々大事だと気づきました。どこで必要か？それは「再利用性」という観点です。内容だけ違くそれ以外は同じコンポーネントが３〜４つもあったら修正する時に１個ずつ修正すると面倒ですよね。そんな時にChildrenを使うと１つのコンポーネントだけで例え増やしたとしてもそのコンポーネントを呼び出せば「コンポーネントを増やさず、何度も使い回せる」ことができる。これが再利用性です。

結果

まとめ

今回はPropsについてまとめました。

ReactのPropsの仕組みを理解するのにはとても時間がかかりましたが、わかると便利ですね。
特にChildrenは結構使っています😆

もしこの投稿を見て参考になったら幸いです。

次の投稿でまた会いましょう

see you next time☕️

今回のソース

Discussion

Honey32

失礼します、以下のコードだと post に { post: "Postsコンポーネントに送られたデータです。" } というオブジェクトが入ってしまうので、正しく表示されないと思います。

- // const Posts = (post) => 　の()内に引数を書く
- //引数名は何の引数かわかる名前にしておけばなんでも良い(Ex.comment,itikome etc.)
- export const Posts = (post) => {
+ export const Posts = ({ post }) => {
  // 以下略

({ post }) で引数を受け取るイディオムは、オブジェクトの分割代入 という構文を使用しています。

<Posts post={PostData} />

は、「Posts コンポーネントに { post: PostData } というオブジェクトを引数として渡してレンダリングする (Posts 関数の第一引数として渡される)」という意味なので、

受け取る側は「第一引数として { post: string } 型のオブジェクトを受け取る」必要があります。素直に書くなら以下のようになります。

export const Posts = (props) => {
  const post = props.post

そこで分割代入を使って、

export const Posts = (props) => {
  const { post } = props

export const Posts = ({ post }) =>

のように短縮した書き方ができるのです。

なので、Props が 1つだろうと、複数だろうと、同じ書き方になります。

山下達也

ご指摘ありがとうございます🙇
再度確認したら正しく表示されませんでした。
オブジェクトの分割代入というのですね！覚えておきます✍️

Honey32

あと、細かい点ですが、 JS には Array.prototype.map メソッドも Map クラスも存在していて、両者は全くの別物なので、前者の話をしたいときには「map メソッド」と言ったほうが、齟齬が生じないので良いと思います。

山下達也

細かい点でも間違って覚えずに済みますのでありがとうございます！
そのように修正させていただきます。