【Day07】你的狀態還好嗎 - State

2018鐵人賽 reactjs 瑞瑞腦袋日記2.0

洪啟瑞

團隊30天熱度

2017-12-26 15:33:05

4636 瀏覽

State

在上一篇的最後
有稍微提到組件（components）是可以透過 state 攜帶狀態資料
state 是 constructor 中的一部分
換句話說
他是組件的初始設定之一
得要在組件產生的時候就預設好（initialize）狀態值
當 state 發生改變
React 會通知render更新畫面

今天主要目標為認識 state 以及學會使用這些狀態資料
一樣先來一段程式碼：

class App extends React.Component {
    constructor(){
        super();
        this.state={
            "name":"RayRay"
        }
    }
   render() {
      return (
         <div>
            <Header/>
            <Content/>
            <p>by {this.state.name}</p>
         </div>
      );
   }
}

這是上一篇的範例程式碼
在constructor中
我設定了一個狀態
這個狀態包含了一個叫做 name 的屬性
這個屬性我給了他 RayRay 的狀態值
而在render的部分我透過大括號用 javascript 去取出這個狀態
this.state.name可以解釋成：

這個組件（this）狀態（state）中特定屬性（在這邊是name）的狀態值

點有點類似物件的
這也就是上次的執行結果可以看到 RayRay 的原因
執行結果：

接下來來個進階版本：
state 可以一次具有多個狀態值
甚至是可以有很多狀態然後很多屬性然後很多物件然後很多屬性和他們的值
這聽起來很像繞口令哈哈
讓我換個方式說明

import React from 'react';
class App extends React.Component {
   constructor() {
      super();
      this.state = {
         data: 
         [
            {
               "name":"dogA",
               "age":"1"
            },
            {
               "name":"catB",
               "age":"2"
            },
            {
               "name":"pigC",
               "age":"3"
            }
         ],
         id:"Animal List"
      }
   }
   render() {
      return (
         <div>
            <Header title = {this.state.id} />
            <table>
               <tbody>
                  {this.state.data.map((animals, i) => 
                  <TableRow key = {i} data = {animals} />)}
               </tbody>
            </table>
         </div>
      );
   }
}

在這段程式碼裡面
state有一個叫做 data 和一個叫做 id 的狀態
data 這個狀態的值是一個陣列
陣列裡面每一個元素都是一個物件
每個物件裡面包含兩個屬性：name 和 age
而 id 這個狀態則只有一個字串作為他的狀態值

render的部分
App 這個組件渲染一個 Header 組件和一個表格
在渲染 Header 這個組件的時候
將 state 像是參數一樣命名成 title 然後傳遞給 Header 這個組件
在 Header 裡面透過this.props.title去取得狀態並且渲染出h1標籤
這是 state 資料從一個組件傳遞到另一個組件的用法

class TableRow extends React.Component {
   render() {
      return (
         <tr>
            <td>{this.props.data.name}</td>
            <td>{this.props.data.age}</td>
         </tr>
      );
   }
}