---
tags: N108 Component
---
# LearnSidebarSubject.jsx
- component 切換流程圖 *(原本 component 名稱把 Learn 去掉)*
- 可以配合 PPT 14頁

digraph Pageswitch {
                nodesep=0.8
                node [color=orange, fontsize=22, shape=box, style=bold]
                edge [color=RosyBrown, style=dashed]
                Learn->{Sidebar Content YtFlame}
                Sidebar->{SidebarSubject SiderbarContent}
                YtFlame->{Thumbnails}
                SidebarSubject [color=orange, fontsize=22, shape=box,style=filled, fillcolor=Bisque]
}

## 獨立 function
| 名稱 | 描述 | async 是否 |
|:--|:--|:--|
|subjectBtn()|傳入 data, choosedomainIndex, Set_sidebarValue，設定成 4 個科目 div button|否|
### subjectBtn()
- new 一個 array 裝 html
- 整個 `data` 為該學校類別有的科目
- 當科目列表 data index 中，跟目前點選一樣的科目 div Css 要多 + ``"edu-selectorange "``
- ex: data.length = 4，i = 0 ~ 3，目前點選到 1，data[1] 的那個 div Css 就會多 ``"edu-selectorange "``

let content = []
for (let i = 0; i < data.length; i++) {
    content.push(
        <div
            className={`${choosedomainIndex != i ? "" : "edu-selectorange "}subject mouse`}
            key={data[i].PID}
            onClick={(e) => Set_sidebarValue(data[i].PID, i)}
        >
            {data[i].Sub}
        </div>
    )
}
return content

## render
### props (上層傳入) 參數介紹
| 名稱 | 類型 | 描述 |
| :------ | :----------- | :----------- |
| `data` | <font color='Gold'>json value</font> | API 傳回的資料，包含：CCID、PID、school、Sub|
| `choosedomainIndex` | <font color='Salmon'>int</font> | 科目對應 ID|
|`Set_sidebarValue`|<font color='Green'>function</font>|傳 sidebar 相對應的主題 ID 與 sidebar 科目相對應的 ID，給上層 Learn.jsx 更新資料|
### return
- 直接 Call this.subjectBtn()

<ul className="domain dis-center2">
    {this.subjectBtn(data, choosedomainIndex, Set_sidebarValue)}
</ul>

[回上層 LearnSidebar.jsx](https://hackmd.io/C3O6Rrh5Sv2BtYRKJrKY-A?view)