掲示板(仮)アプリを作ってみよう!Part2

React
師匠
師匠

よし!

それでは、休憩もほどほどにして、開発の続きを進めていこう。

とんぺい
とんぺい

わかったブゥ?

今からどんなもの作るんだブゥ?

師匠
師匠

今回は、propsの復習も兼ねてCommentDetailコンポーネントを作成し、複数の投稿を表示し、評価の項目も付け加えていくよ。

じゃあ早速App.jsComment.jsを以下のようにしてみよう。

propsの復習

とんぺい
とんぺい

うん。propsの使い方のいい復習になったブゥ!

これはAppコンポーネントから、CommentDetailコンポーネントに、それぞれ『authordatedescriptionavator』を渡しているブゥね!

師匠
師匠

その通り。

じゃあ最後に、評価カードを追加して

この講義を終わりにしよう。

評価項目を追加する

師匠
師匠

ここでは、Semantic UIのCardを使っていくよ。

以下のように、ApprovalCard.jsを作成しApp.jsの中身も変更していこう。

とんぺい
とんぺい

おぉ!良い感じになったブゥ!

師匠、できたよ!

師匠
師匠

うん。綺麗にできているね。

いい感じだ。

prpps.childrenとは?

とんぺい
とんぺい

ところで、ApprovalCard.jsの6行目で出てくる『prpps.children』ってなんだブゥ?

師匠
師匠

それを説明するためには、まずはApp.jsファイルの10行目付近を見てみよう。

ここで、<CommentDeteil><ApprovalCard>に囲まれているのがわかるかい?

とんぺい
とんぺい

うん。

<ApprovalCard>

   <CommentDetail>

    ・

  ・

   />

</ApprovalCard>

ってなってるのがわかるブゥ!

師匠
師匠

うん。そこだね。

Reactでは、コンポーネントが子要素を囲んでいる(wrap)している時は

{props.children}とすることで囲んでいる側のコンポーネントで、どこでも子要素を参照することができるんだ。

とんぺい
とんぺい

ふんふん。

つまり今回は囲んでいる側『Approvalコンポーネント』内で、{props.children}を使うことで子要素の『CommentDetailコンポーネント』をどこでも参照できると言うことブゥね!

師匠
師匠

その通り。

以上で、今回の講義を終わりにしたいと思うけど、他に何か質問はあるかい?

とんぺい
とんぺい

今回の内容に関しては、大丈夫だブゥ!

師匠、今日もありがとう!

さようなら〜

師匠
師匠

それは良かった。

それではまた次回。

コード詳細

pigboard

参考

Modern React with Redux [2019 Update]

コメント

タイトルとURLをコピーしました