React

[React] 抽獎小遊戲 陣列渲染實作練習

second9040

因緣際會之下就開始學React了， 官網教程 連中文版都很精美，我雜亂的筆記就不整理上來了(畢竟我比較懶一點)

 

本來是要練習 React的狀態傳遞，實做完發現也就那樣，至少這個練習用到的技巧沒什麼好記錄的，倒是陣列渲染的部分因為太不熟悉了摸了好一會兒。

 

先看 單頁成品 (用 CDN 方式引入 React )

 

也有做用指令架起來的 localhost 版。
hot reload很方便，其實開發的時候主要是用這個在做。

create-react-app react-example

react-example 可以換成任何你喜歡的名字 不能有大寫

 

這個也有放github github 。

整包拉下來然後安裝 node_modules yarn install 或 npm i 完成之後應該 yarn start 就可以跑。

目前理解是 yarn 比較快， npm 指令比較齊全。
參考文章: Day 14: React篇: 建置React開發環境

 

以下進入文章正題。

 

功能說明中第三點處理亂數不重複的地方:

 

const [draw, setDraw] = React.useState(0);

 
draw 記錄每次亂數的結果， setDraw設定新的亂數 useState 是 React
的鉤子，這行就是每次一載入網頁都先設定成0的意思

先用Math.random()方法取得一個小於10的亂數

let randomDraw = Math.floor(Math.random() * 10);

 

如果 draw 等於 randomDraw 就重新亂數， 用 while 去跑，確保連續兩次得到的亂數結果不會相同

 

const [draw, setDraw] = React.useState(0);
  let buttonClick = () => {
    setOriginalDraw(false);
    let randomDraw = Math.floor(Math.random() * 10);
    while (draw === randomDraw) {
      // 避免亂數到同一個數字的狀況
      randomDraw = Math.floor(Math.random() * 10);
    }
    setDraw(randomDraw);
  };

 

功能說明的字本來是寫死，後來配合 rwd ，
本來思路是想說小於某個尺寸時，就將 ul li 替換成 div p 換取更多空間
所以把他寫成陣列想要以螢幕尺寸為基準做判斷(要渲染 ul 還是 div )

 

let instructionText = [
  "點選 [抽獎] 按鈕進行抽獎，抽到數字為2的倍數即中獎。",
  "點選 [清除結果] 按鈕清除抽獎結果，第一次載入網頁與甫按下 [清除結果] 之後不能點選。",
  "亂數數字有做處理，本次與上一次相同時重新取值，確保連續兩次的結果不會相同。",
];

<ul className="testUl">
  {instructionText.map((item, i) => (
    <li key={i}>{item}</li>
  ))}
</ul>

 

剛從 vue 轉過來，還有點不習慣沒有 v-for 的世界
不過 react 這種陣列渲染的方式也很好，非常直覺， 他直接使用js 的 map() 渲染

 

跟 vue 相同，透過 map 渲染出來的結果一樣需要給一個(同一層之中)唯一的 key
一開始沒有給 key 讓我爆了很久XD

好的這篇文章我主要就想說這點。結束(誤)。

 

好不容易(?)用陣列渲染出東西，又碰到樣式的問題。
個別字想要加顏色，所以用了span搭配行內樣式，可是這樣要怎麼塞進陣列裡呢????

 

然後我就放棄了XD
不是，因為我突然靈光一現... 我的思路是想要當螢幕尺寸縮小，不要 ul li 前面的那個點點， 那我其實只要用 css 不顯是那個點就好啦XDDDD天啦嚕我在幹嘛啦。
 

加上這行即可

list-style-type: none;

 

成品放了直接寫死與陣列渲染的版本， 差別只在於後者沒有樣式。

 
大概就是這樣了。 等下再發一篇講標題前後那兩根線的文，
那兩根線燒掉我的好幾個腦細胞QAQ。