iT邦幫忙

2021 iThome 鐵人賽

DAY 7
1
Modern Web

用Jest和Enzyme來寫React測試吧!!系列 第 7

【Day7】試著用JSX在頁面上渲染出Table吧٩(๑❛ᴗ❛๑)۶

前面在第四篇的時候有稍微說明JSX是什麼東西和有什麼優點,

這一篇我們要來試著使用JSX 在React裡面 來渲染出一個Table !!

在我們印象中的Table,除了有標題以外,還有一列一列的內容

  • 標題會放在 html 標籤 thead 的tr裡,且每個tr等於列,裡面的欄 要使用th
  • 內文會放在 html 標籤 tbody 的 tr裡 ,且每個tr等於一列,裡面的欄 則要使用td

大概類似下面這張圖 ↓

對Table的樣子熟悉後,再來是Array陣列,我們的tr的資料型態當然是Array !! 很少很少會是一行一行寫死的 ..

假設我們要放進Table的資料長以下這樣 ↓

let testArray = [
		{
			name:"employee1",
			age:"26"
		},
		{
			name:"employee2",
			age:"29"
		}
]

我們要怎麼樣在React遍歷它們呢 !?

  • 在React Component 的render function 裡先畫好一個Table的雛形

      render() {
      	return(
      		 <div className="App">
                  <table>
                      <thead>
                          <tr>
                            <th>姓名</th>
                            <th>年齡</th>
                          </tr>
                      </thead>
    
                  </table>
        	</div>
      	)
      }
    
  • 將資料遍歷在Tbody裡 (以下有兩種做法)

    1. 將遍歷的Tr寫成一個陣列常數

        render() {
            let testArray=[
              {
                name:"employee1",
                age:"26"
              },
              {
                name:"employee2",
                age:"29"
              }
            ]
            const tbodyContent=testArray.map(function(value,index){
      
              return(
                <tr>
                    <td>{value.name}</td>
                    <td>{value.age}</td>
      
                </tr>
            )
        	return(
        		 <div className="App">
                    <table>
                        <thead>
                          	<tr>
                                  <th>姓名</th>
                                  <th>年齡</th>
                              </tr>
                        </thead>
                        <tbody>
                        	{tbodyContent}
                        </tbody>
      
                    </table>
          	</div>
        	)
        }
      
    2. 直接在Tbody裡遍歷

        render() {
        	return(
        		 <div className="App">
                    <table>
                        <thead>
                         		<tr>
                                  <th>姓名</th>
                                  <th>年齡</th>
                              </tr>
                        </thead>
                        <tbody>
                        	{testArray.map(function(value,index){
      
                              return(
                                <tr>
                                    <td>{value.name}</td>
                                    <td>{value.age}</td>
      
                                </tr>
                           	 )
                            }
                        </tbody>
      
                    </table>
          	</div>
        	)
        }
      

這時候呢!! 不要以為在頁面上看見table和渲染出來的資料就沒問題了~

我們打開 f12 看看熟悉的console視窗 ,是不是有偷偷警告我們什麼 !?

這事告訴我們當我們跑迴圈遍歷的時候,我們必須給予每一筆資料一個獨一無二的KEY值,
通常可以直接用陣列的index值

  render() {
  	return(
  		 <div className="App">
              <table>
                  <thead>
                   		<tr>
                            <th>姓名</th>
                            <th>年齡</th>
                        </tr>
                  </thead>
                  <tbody>
                  	{testArray.map(function(value,index){

                        return(
                          <tr key={index}>
                              <td>{value.name}</td>
                              <td>{value.age}</td>

                          </tr>
                     	 )
                      }
                  </tbody>

              </table>
    	</div>
  	)
  }

這樣就解決了那看起來令人煩躁的報錯了 ヽ(^o^)丿

下一篇要來說明怎麼樣在React Component裡建立一個function,
並透過State傳入到子類別當prop使用在事件(event)上面,
例如onClick , onBlur ... 等等的 ~

加油加油 !! 再撐幾篇我們就要進入測試了~


上一篇
【Day6】Props和States之間到底是什麼關係!? 怎麼傳怎麼用咧..? o_O ||
下一篇
【Day8】 將Function當成state傳給子類別套用在事件上吧≖‿≖
系列文
用Jest和Enzyme來寫React測試吧!!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言