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

digraph Pageswitch {
                nodesep=0.5
                node [color=orange, fontsize=22, shape=box, style=bold]
                edge [color=RosyBrown, style=dashed]
                Detail->{Detailbtn}
                Detailbtn->{DetailPreview}
                Detail [color=orange, fontsize=22, shape=box,style=filled, fillcolor=Bisque]
}

## import 資料
| 名稱 | 類型 | 描述 | 來源 |
| :------ | :----------- | :----------- | :----------- |
| Problem_img | <font color='BlueViolet'>component</font> | 每個題目的圖片容器 component | exam/ExamProblemImg.jsx |
| Detail_btn | <font color='BlueViolet'>component</font> | 提供以及觀看詳解 buttom component | detail/Detailbtn.jsx |
## constructor 介紹
### state 參數介紹
| 名稱 | 類型 | 描述 | defalut |
| :------ | :----------- | :----------- | :-- |
| `showoverflow` | <font color='blue'>bool</font> | overflow 變數，true or false，~~忘記做甚麼用了~~ | `true` |
## componentDidMount
- 增加監聽事件 keydown (偵測 f5 按下提醒)
## componentDidUpdate
- 刪除監聽事件 keydown (偵測 f5 按下提醒)

## 獨立 function
| 名稱 | 描述 | async 是否 |
|:--|:--|:--|
|OverFlow()|showoverflow = !this.state.showoverflow|否|
## render
### props (上層傳入) 參數介紹
| 名稱 | 類型 | 描述 |
| :------ | :----------- | :----------- |
| data | <font color='Gold'>json value</font> | 考題相關資訊|
| inputSet | <font color='orange'>string array</font> | 每個題目的狀態 (對 or 錯) |
| myans | <font color='Gold'>json value</font> | 使用者回答考題答案 |
| ansset | <font color='orange'>string</font> | 正確解答 |
| getstr | <font color='Green'>function</font> | 考題圖片 NamePath 後處理 function |
### return
- 用 map 建立 Div，包含：考試題目、詳解 wrapper、詳解按鈕 [Detailbtn.jsx](https://hackmd.io/7ND2Rt3LSsGwIgeLCgzwGw?view)
- css 用 inputSet[i] 去判斷 (答對是<font color='lightgreen'>綠色</font> 答錯是<font color='red'>紅色</font>)
- 

<div className={`total ${this.state.showoverflow ? "" : " hidden"}`}>
    {data.map((d, i) =>
        <div className={`problem-containter ${(inputSet[i] == 'yes') ? "yes" : "no"}`} key={d.pid}>
            <div className="inputa">你的答案：{myans[i][1]}</div>
            <div className="outputa">正確答案：{ansset[i]}</div>
            <Problem_img str={getstr(d)}></Problem_img>
            <Detail_btn OverFlow={this.OverFlow} pid={d.pid}></Detail_btn>
        </div>)}
</div>

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