Takeaway

• JSX不是實例
• let + if雖然冗長但靈活
• &&也可以做條件渲染
• 寫成{count > 0 && '✔'}：才不會在count等於0時渲染出0
• &&的後綴性質很適合做插入間隙
• filter搭配map好用
• expression body對block body：隱式返回vs顯式返回。前者單行免return
• map裡的JSX通常都要指定key值
• key值搭配多個DOM節點：可用<Fragment key={person.id}></Fragment>包住
• 還要記得import { Fragment } from 'react';
• uuid也可以拿來生成key
• 拿索引值當key的話，增刪或重新排序時可能會有bug
• 不能直接return {ans}，會觸犯大括號限制！要當成文本用標籤包起來！

在這裡要實作的是「把嵌套清單拆成父子組件」。
第一步我會像是在做MVP（最小可行性產品）那樣，先確保父子組件有順利連結。如圖所示，如上次的Takeaway：在子組件Note列出需要的props和HTML，在父組件NoteMap寫好props的值。

import { note } from "./data.js";
  
function Note({ name, tips }) {
  return (
    <div>
      <h2>{name}</h2>
      <ul>
        <li>{tips}</li>
      </ul>
    </div>
  );
}

export default function NoteMap() {
  return (
    <div>
      <h1>現在學React還來得及嗎？</h1>
      <Note 
        name="源起與基本觀念"
        tips="React是函式庫，需要和生態系一起看才相當於框架"
      />
    </div>
  );
}

問題來了，此時咱們額外引入的note陣列仍未被使用。而這批沒有寫在父組件裡的資料，還需要不同的處理。先改父組件。

我們需要透過map讓「父組件裡的子組件」可以使用note陣列。記得要設定key是哪個鍵，恰似SQL的主鍵。而map的擺放位置就是把你要重複渲染的東西包住。父組件這裡還用到之前介紹過的「展開語法」{...n}，可以把n的資料整個傳下去。寫完父組件的map之後，子組件的map就顯得容易多了。

import { note } from "./data.js";

function Note({ name, tips }) {
  return (
    <div>
      <h2>{name}</h2>
      <ul>
        {tips.map((t) => (
          <li key={t}>{t}</li>
        ))}
      </ul>
    </div>
  );
}

export default function NoteMap() {
  return (
    <div>
      <h1>現在學React還來得及嗎？</h1>
      {note.map((n) => (
        <Note key={n.id} {...n} />
      ))}
    </div>
  );
}

可以比較一下兩段程式碼之間的差異，更容易理解個中邏輯。

//map前
<ul>
    <li>{tips}</li>
</ul>

//map後
<ul>
    {tips.map((t) => (
      <li key={t}>{t}</li>
    ))}
</ul>

//map前
<Note 
    name="源起與基本觀念"
    tips="React是函式庫，需要和生態系一起看才相當於框架"
/>

//map後
{note.map((n) => (
    <Note key={n.id} {...n} />
))}