2020.11.9 小紅點邊做邊寫的東西 還是要學會簡化邏輯鴨 開頭是參考的別人的程式碼（主要一開始都不會畫小紅點
有新題目時顯示變化，先嚐試小紅點，如果實現不了就考慮改變顏色或者樣式等等
loading的圖示不要再左上角，水平垂直居中
demo(小紅點)：
index.html：列表
紅點相對定位再列表文字右上角，
d為資料來源var[{text: '亞索', id:1}]
amGloble.Remind(d,'text', 'id', 'list')呼叫方法
點選列表，將唯一標識id再位址列傳給detail.html詳情頁
<ul id="list"></ul> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="./remind.js"></script> <script> var d = [{ text: '亞瑟', id: 1 }, { text: '凱', id: 2 }, { text: '露娜', id: 3 }]; // d:資料， text：資料中的文字， key：資料中的唯一標識， dom：插入DOM節點的id名 amGloble.Remind(d, 'text', 'id', 'list'); </script>
detail.html：詳情頁
獲取列表中資料的唯一識別符號id，若拿到本條資料id，說明使用者已經進入詳情頁，將localStorage中儲存的資料更新
<div id="detail"></div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="./remind.js"></script> <script> var key = amGloble.GetQueryString('key'); // 獲取位址列引數 amGloble.Updata(key); // 更新檢視資料 var text = amGloble.GetQueryString('text'); $('#detail').text(text); </script>
remind.js
(function () { window.amGloble = { Remind: function (d, text, key, dom) { // d:資料，text：資料中的文字，key：資料中的唯一標識（id），dom：插入DOM節點的id名 var checkData = JSON.parse(localStorage.getItem('checkData')); if (JSON.stringify(checkData) == 'null') { checkData = {}; }; var html = ''; for (i = 0, l = d.length; i < l; i++) { var isChecked = false; var isOwn = checkData.hasOwnProperty(d[i][key]); // 判斷是否包含這個屬性 if (isOwn) { // 如果包含這個訂單屬性，則取localStorage中的值 isChecked = checkData[d[i][key]]; } else { // 初始化都為false checkData[d[i][key]] = false; // localStorage沒有此訂單檢視狀態，則賦值fasle未檢視 localStorage.setItem('checkData', JSON.stringify(checkData)); // 轉為JSON字串，儲存localStorage }; var point = isChecked ? '' : '<div class="point"></div>'; // 已檢視不顯示紅點，未檢視就顯示紅點 html += '<li><a href="./detail.html?key=' + d[i][key] + '&text=' + d[i].text + '"><span>' + d[i].text + point + '</span></a></li>'; }; $('#' + dom).html(html); }, Updata: function (key) { if (key) { var checkData = JSON.parse(localStorage.getItem('checkData')); if (JSON.stringify(checkData) != 'null') { checkData[key] = true; localStorage.setItem('checkData', JSON.stringify(checkData)); } }; }, GetQueryString: function (name) { // 獲取位址列引數 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) return decodeURIComponent(r[2]); return null; } } })();
所以有兩件事要做，第一，用什麼判定來了新的題目，第二怎麼判斷是否被檢視。
（推送題目是用<button OnClick={OnOk}>，這個OnOk通過sock.push(..../${token}/....../&{id})來推送。但是我認為，應該是interviewee這邊recieve題目後才判定有新的題目。）
同時判定結果報存在一個TabPanel可以收到的地方，因為我認為小紅點應該在TabPanel位置顯示。
src/components/interviewee/room/problem.jsx中n=problems.length會在收到題目後傳送變化，因此可以在此時設定isChecked，噹噹前TabPanel為啟用狀態時，設定為true，噹噹前TabPanel不為啟用狀態時，設定為false,同時在TabPanel附近顯示小紅點。
小紅點<div className="point">，放在<Tabs>標籤中，然後預設選中第一個TabPanel，即聊天那欄。
當表示題目的TabPanel被啟用時，就是被檢視
我現在設定的是，
對比一下：
發現有紅點會影響兩個TabPanel的位置：
碼一下：
就很多時候不知道元件什麼時候會更新……對，難道就是要關注哪些操作是響應式的嗎？
現在的效果是：
在聊天，被推送題目，產生紅點，點選題目，紅點消失，來回點紅點不再產生；
在題目，被推送題目，不產生紅點，題目正常變化，切回聊天會產生紅點。這是因為setHasNew只在tabOnChange時才會被重新設定值，因此這種情況下hasNew沒有被設定為false。
題目->聊天：setHasNew(false); 分析：在題目時，沒有紅點，切回聊天時，hasNew被設定為false，應該也不會有紅點。
聊天->題目：√
題目->題目：不用變吧
聊天->聊天：不用變吧
修改後，以上四種情況都沒有問題：
function checkProblem(key){
if(nowKey === "1" && key === "0"){//題目->聊天
setHasNew(false);
}
if(nowKey === "0" && key === "1"){//聊天->題目
setHasNew(false);
}
setNowKey(key);
}
重新整理：因為useState中set是非同步的
看題後重新整理：
- 在題目重新整理：有紅點，並回到聊天頁
- 在聊天重新整理：有紅點，並回到聊天頁
沒看題重新整理：
- 在聊天重新整理：有紅點，並回到聊天頁
可以使用useEffect來，還是解決不了重新整理的問題
{(hasNew && nowKey != "1") && <div className="point"></div>}
<Spin {...props}/>