React 入門

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

Comment コンポーネントの作成

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

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

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

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

export default Comment

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

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

const CommentListPage: React.FC = () => {

．．．（中略）．．．

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

・・・（省略）．．．

CommentListPage コンポーネントから渡された comment データを Comment コンポーネントでは props で受け取ることができます．Props は親コンポーネント（ここでは CommentListPage）から子コンポーネント（ここでは Comment）へ値を受け渡しするための窓口のようなイメージで理解しておくとよいでしょう．このとき，CommentListPage から渡されるデータの型を3行目のように Comment コンポーネントで CommentProps インターフェースとして定義します．その上で，12行目のように引数 props の型に CommentProps を指定します．

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

interface CommentProps {
  comment: {
    id: number;
    title: string;
    body: string;
    updated_at: string;
  };
}

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

export default Comment

Comment コンポーネントを使ってコメントのタイトルが表示できるようになりました．

目次に戻る