---
tags: N108 Component
---
# Learn.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}
                Learn [color=orange, fontsize=22, shape=box,style=filled, fillcolor=Bisque]
}

## import 資料
| 名稱 | 類型 | 描述 | 來源 |
| :------ | :----------- | :----------- | :-- |
| queryString | <font color='Green'>function</font> | query-string 擷取函數 | query-string |
| Sidebar | <font color='BlueViolet'>component</font> | 學習中心 sidebar | learn/LearnSidebar.jsx |
| YT_flame | <font color='BlueViolet'>component</font> | 影片觀看 component | learn/LearnYtFlame.jsx |
| Content | <font color='BlueViolet'>component</font> | 學習中心內容 (學習內容) | learn/LearnContent.jsx |

## constructor 介紹
### state 參數介紹
| 名稱 | 類型 | 描述 | defalut |
| :------ | :----------- | :----------- | :-- |
| `domainID` | <font color='Salmon'>int</font> | 學習中心 Sidebar 對應的 OID| `0` |
| `choosedomainIndex` | <font color='Salmon'>int</font> | 學習中心 Sidebar 科目對應的 ID，ex：物理(0)、化學(1)、生物(2)、地科(3)| `0` |
| `contentID` | <font color='Salmon'>int</font> | 學習內容對應的 OID | `0` |
| `YTOID` | <font color='Salmon'>int</font> | 影片對應的 OID (VID)| `0` |
| `openYTflame` | <font color='blue'>bool</font> | 切換到影片列表模式，true 為切換；false 為不切換| `false`|

## 獨立 function
| 名稱 | 描述 | async 是否 |
|:--|:--|:--|
|openVideoflame()|轉換成影片列表，傳入 VID 給 `state.YTOID`，且切換成影片列表 (openYTflame = true)|否|
|Set_contentValue()|傳入學習內容相對的 ID，並存入`state.contentID` |否|
|Set_sidebarValue()|傳入 sidebar 相對應的主題 ID 與 sidebar 科目相對應的 ID，並存入`state.domainID`與`state.choosedomainIndex`|否|
## render
### props (上層傳入) 參數介紹
| 名稱 | 類型 | 描述 |
| :------ | :----------- | :----------- |
| `login` | <font color='blue'>bool</font> | 登入參數，true 為登入中；false 為沒登入(訪客) |
| `info` | <font color='Gold'>json value</font> | API 傳入的個人 ID、名稱、SSO來源、Type|
| `hide_sidebar` | <font color='blue'>bool</font> | sidebar 參數，true 為隱藏 sidebar；false 為顯示 sidebar|
### 額外參數
| 名稱 | 類型 | 描述 |
| :------ | :----------- | :----------- |
| `schoolname` | <font color='orange'>string</font> | 學校類型，由 queryString 抓取|
### return
- 學習中心的 sidebar，➡️ [LearnSidebar.jsx](https://hackmd.io/C3O6Rrh5Sv2BtYRKJrKY-A?view)
- 

{hide_sidebar &&
    <Sidebar
        schoolname={schoolname}
        domainID={domainID}
        contentID={contentID}
        choosedomainIndex={choosedomainIndex}
        Set_sidebarValue={this.Set_sidebarValue}
        Set_contentValue={this.Set_contentValue}
    />}

- 主視窗分成 2 種模式
- Content 模式 ➡️ [LearnContent.jsx](https://hackmd.io/Z0lzqcr1SP-pvARwvFsyrQ?view)
- 
- YT_flame 模式 ➡️ [LearnYtFlame.jsx](https://hackmd.io/E1fVZluLTz2_2W4Z_tFUMA?view)
- 

{openYTflame ?
    <YT_flame
        YTOID={YTOID}
        domainID={domainID}
    /> :
    <Content
        login={login}
        info={info}
        schoolname={schoolname}
        contentID={contentID}
        openVideoflame={this.openVideoflame}
    />
}

[回上層 pageswitch.jsx](https://hackmd.io/WkWyQZuOQheHmDFcnRCLuw?view)