挑战 React 第十九篇

画面显示目标

製作一个药局清单。

Map() function

map() 方法会建立一个新的阵列，其内容为原阵列的每一个元素经由回呼函式运算后所回传的结果之集合。

实作 - 1

原本一笔一笔呈现。

class PharmacyList extends Component {  render() {    const pharmacies = ['丁丁药局', '第二药局', '很棒药局'];    return (      <div>        <h2>{pharmacies[0]}</h2>        <h2>{pharmacies[1]}</h2>        <h2>{pharmacies[2]}</h2>      </div>    )  }}

调整用 map 渲染清单。

class PharmacyList extends Component {  render() {    const pharmacies = ['丁丁药局', '第二药局', '很棒药局'];    return (      <div>        {          pharmacies.map((pharmacy) => <h2>{pharmacy}</h2>)        }      </div>    )  }}

亦可以调整pharmacyList于 return 前面，这样就更清楚 return 内容是什么。

class PharmacyList extends Component {  render() {    const pharmacies = ['丁丁药局', '第二药局', '很棒药局'];    const pharmacyList = pharmacies.map((pharmacy) => <h2>{pharmacy}</h2>);    return (      <div>        {pharmacyList}      </div>    )  }}

实作 - 2

class PharmacyList extends Component {  render() {    const pharmacies = [      {        id: 1,        name: '丁丁药局',        mask: {          adult: 10,          child: 4,        }      },      {        id: 2,        name: '第二药局',        mask: {          adult: 0,          child: 14,        },      },      {        id: 3,        name: '很棒药局',        mask: {          adult: 0,          child: 14,        },      }    ];    const pharmacyList = pharmacies.map((pharmacy) => (      <div>        <h2> 地点: {pharmacy.name} </h2>        <h4> 大人口罩剩余：{pharmacy.mask.adult} ＆ 小孩口罩剩余：{pharmacy.mask.child} </h4>      </div>      ));    return (      <div>        {pharmacyList}      </div>    )  }}

拆分组件

import React, { Component } from 'react';import Mask from './Ｍask';class PharmacyList extends Component {  render() {    const pharmacies = [      {        id: 1,        name: '丁丁药局',        mask: {          adult: 10,          child: 4,        }      },      {        id: 2,        name: '第二药局',        mask: {          adult: 0,          child: 14,        },      },      {        id: 3,        name: '很棒药局',        mask: {          adult: 0,          child: 14,        },      }    ];    const pharmacyList = pharmacies.map((pharmacy) => (      <div>        <h2> 地点: {pharmacy.name} </h2>        // 把口罩物件传递给 Mask Component        <Mask mask={pharmacy.mask}/>      </div>      ));    return (      <div>        {pharmacyList}      </div>    )  }}export default PharmacyList;

Mask Component

import React, { Component } from 'react'class Ｍask extends Component {  render() {    const mask = this.props.mask;    return (      <h4>        大人口罩剩余：{mask.adult} ＆         小孩口罩剩余：{mask.child}      </h4>    )  }}export default Ｍask;

实作画面

结论

在写 react 的时候，使用 map 方法真的很方便，因为
需要一直 return jsx 里面的值;且适时拆分组建会让你的程式码变得更乾净更清楚。

但若在网页的console.log 可以看到index.js:1 Warning: Each child in a list should have a unique "key" prop.这样的提示讯息，下篇文章会讲解这个部分。