React 入門

JavaScript コメント掲示板アプリの開発

Comment コンポーネントの作成

前のページのようにコメントの一覧を表示してもよいのですが，React では特定の処理（表示）を担当する機能をコンポーネントとして切り出してそれを利用する方法が好まれます．ここでは1件のコメント表示を担当する機能を Comment コンポーネントとして作成することにします．

まず，src/components/ フォルダ内に Comment.js ファイルを作成します．Visual Studio Code であればファイルを作成したら先頭で rafce と入力した後に Tab を押して次の雛形を作成します．（その他のエディタであれば下のコードをコピーして利用してください．）

src/components/Comment.js
import React from 'react'

const Comment = () => {
  return (
    <div>Comment</div>
  )
}

export default Comment

CommentListPage.js から Comment コンポーネントを呼び出すコードを追加します．具体的にはスクリプトの先頭で Comment コンポーネントをインポートしてから，commentItems 関数の中から Comment コンポーネントを呼び出します．このとき，やはり key 属性が必要になります．また，12行目のようにコメントのデータを Comment コンポーネントに渡しています．

src/components/CommentListPage.js（抜粋）
import React from 'react'
import Comment from './Comment';

const CommentListPage = () => {

．．．（中略）．．．

  const commentItems = results.results.map((comment) => {
    return (
      <Comment
        key={comment.id}
        comment={comment}
      />
    )
  });

・・・（省略）．．．

CommentListPage コンポーネントから渡された comment データを Comment コンポーネントでは props で受け取ることができます．なお props は親コンポーネント（ここでは CommentListPage）から子コンポーネント（ここでは Comment）へ値を受け渡しするための窓口のようなイメージで理解しておくとよいでしょう．

src/components/Comment.js
import React from 'react'

const Comment = (props) => {
  return (
    <div>{props.comment.title}</div>
  )
}

export default Comment

コメントのタイトルが表示できました．

目次に戻る