ReactでES6のmapメソッドを使用してリストを作成する

ReactでES6のmapメソッドを使用してリストを作成する

HTMLリストをレンダリングするReactコンポーネントを作成してみます。

<li>~</li>タグの個所を配列のmapメソッドとアロー関数を使用してレンダリングします。

サンプル

リスト内容はpropsから渡すコンポーネントに修正する

TestというリストをレンダリングするReactコンポーネントを作成しましたが、肝心のリスト内容が固定になってしまっています。これだと汎用性がないので、propsを使用して属性として外部から渡してあげます。

以下のように書きなおします。

この方がTestコンポーネントのitems属性に指定する値を変えることによってレンダリングされるリストの内容が変わるので良いかと思います。

サンプル

ReactでES6のmapメソッドを使用してリストを作成する

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA