React-(四)組件進階

用 props 指定初始 state

• 在使用組件的 tag 中，寫一個 props ，其初始值為 10 的 initCount

  // index.js
  
  // import... 略
  ReactDom.render(<Counter initCount={10}/>,document.getElementById('root'));

• 第 5 行，使用建構子(constructor)來取代直接寫 state，其傳入 props 參數

• 第 6 行的 super 指的是繼承自的父層”Compoment”

  //Counter.js
  
  //import... 略
  class Counter extends Component{
      constructor(props){
          super(props);
          this.state = {
              count:props.initCount,
          }
      }
  }

預設 props 值

不過，假設使用組件時忘了給 props，就會出現 NaN 的錯誤

• 第 4 行，在使用 Counter 組件時，沒有給 initCount，所以在建構子函式中，會取得不到 props，導致畫面出現 NaN 錯誤

  //index.js
  
  //import... 略
  Reactdom.render(<Counter/>,document.getElementById('root'))

為了避免在使用組件時，上述忘了給 props 的情況，必須給予 props 預設值

方法一：使用 static defaultProps 預設 props 值

// Counter.js

//import... 略
class Counter extends Component{
    static defaultProps = {
        initCount :0
    }
    // ...略
}

方法二：用 物件.default 預設 props 值

//Counter.js

//import... 略
class Counter extends Component{
    // ...略
}

Counter.default{
    initCount:0
}

用 propTypes 檢查 props 型別

• 在使用組件的 tag 中，寫一個 props ，其初始值為 “0”(字串) 的 initCount

  // index.js
  
  // import... 略
  ReactDom.render(<Counter initCount="0"/>,document.getElementById('root'));

• 寫了一個方法，讓 count + 1，原先預期初始值是 0，執行動作後會變成 1

  // Counter.js
  
  //import... 略
  class Counter extends Component{
      // ...略
      addCount = ()=>{
          this.setState({
              count:this.state.count +1;
          })
      }
  }

• 可是實際執行結果卻變成”01”，因為一開始傳進來的 props 型態為字串 “0” 而非數字 0，所以導致錯誤
  

為了避免因為型態錯誤，導致後續組件的處理出錯，需要預先定義好 props 的型態

方法一：使用 static default 預設 props 值

• PropTypes 本來是 React 內建的模組，可是後來被分割獨立，所以第 4 行，要單獨引入 PropTypes
• 第 8 行定義 initCount 的型別要是數字型態

// Counter.js

//import... 略
import PropTypes from 'prop-types';

class Counter extends Component{
    static propTypes = {
        initCount :PropTypes.number,
    }
    // ...略
}

方法二：使用 物件.propTypes 檢查 props 型別

• PropTypes 本來是 React 內建的模組，可是後來被分割獨立，所以第 4 行，要單獨引入 PropTypes

  //Counter.js
  
  //import... 略
  import PropTypes from 'prop-types';
  
  class Counter extends Component{
      // ...略
  }
  
  Counter.propTypes{
      initCount:PropTypes.number,
  }