2022 第27週 實作筆記：手風琴 (accordion) 分組元件
總結
負責的專案未來有類似需求，試做一下練個手感
展示：https://tzynwang.github.io/react-accordion-like-tags-group/ 完整原始碼：https://github.com/tzynwang/react-accordion-like-tags-group
開發思路
- 11 至 54 行：模擬後端回傳的組 (parent) 與標籤 (tags) 資料
- 55 行：設定畫面上每三個「組」為「一行」資料
- 86 至 98 行：模擬透過 api 取得組與標籤資料，並將之保存到元件的 states 中
- 99 至 131 行：
- 首先將組 (parent) 分割為「行」（每三組一行，使用
lodash.chunk協助將資料切為三塊一組） - 於 101 至 129 行將「每一行」的「三組資料」做成「三組 UI 介面」，並於 106 行綁上
handleGroupClick讓使用者可與其互動 handleGroupClick的行為參考 68 至 76 行：觸發時會一併設定「使用者現在點擊了哪一行 (setCurrentRow(row);)」與「使用者點擊了哪一組 (setCurrentGroup(/* ... */);)」這兩類資料- 在這邊準備好的
rows資料會在第 142 行展開，並每一行 (row) 會在第 152 行被渲染在畫面上
- 首先將組 (parent) 分割為「行」（每三組一行，使用
- 156 至 186 行：這邊負責渲染「使用者點選『組』後會看到該組全部『標籤』」的容器（參考螢幕截圖中灰底的部份）
- 目前的邏輯是「一次只會展開一組標籤容器」，所以 156 行會根據
currentGroup的值以及currentRow === rowsIndex與否來決定容器是否該呈現在畫面上
- 目前的邏輯是「一次只會展開一組標籤容器」，所以 156 行會根據
- 以上邏輯的整體表現：使用者點選「組」時，會展開該行下方的標籤容器，標籤容器會包含該「組」所有的標籤；並目前的畫面一次只會展開一個標籤容器
其他
這次使用 .nvmrc 來進行 node 版本控制：先透過 nvm use {version} 來切換到需求版本，再透過 node -v > .nvmrc 將版本寫入 .nvmrc 即可