挑戰 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.這樣的提示訊息，下篇文章會講解這個部分。