React PropTypes檢驗傳遞的值

在工作當中，我們進行傳參一定要對象傳遞的數據進行校驗，如果不校驗的話，大量的數據傳遞，會造成混亂，業務邏輯也沒辦法保證。

引入prop-types

 //prop-types  父傳子 要在子組件引入並校驗
import PropTypes from "prop-types"

PropTypes 提供一系列驗證器，可用於確保組件接收到的數據類型是有效的。在本例中, 我們使用了 PropTypes.string。當傳入的 prop 值類型不正確時，JavaScript 控制檯將會顯示警告。出於性能方面的考慮，propTypes 僅在開發模式下進行檢查。

根據父組件向子組件傳遞的數據，及類型進行校驗

return(
     <XiaojiejieItem content={item} index={index}
     key = {index+item}
     //  傳遞刪除的方法給子組件
      deletItem = {this.deletItem.bind(this)}
     //把 數組 數據傳遞給子組件，單向數據流 傳遞過去只能使用不能修改
    list = {this.state.list}
    //  avname="小劉"
    />
                       
 ) 

子組件內進行校驗

    // 注意校驗的時候要寫在 類的外面
    xiaojiejieItem.PorpTypes={
        index:PropTypes.func,  //這裏傳過來的是數字改成方法 也不報錯
        avname:PropTypes.string.isRequired, //isRequired 必須傳參
        content:PropTypes.string,
        deletItem:PropTypes.func   //校驗方法
    } 

必傳值的校驗

比如現在我們加入一個avname的屬性，並放入JSX中，就算不傳遞這個值也不會報錯的

    render() { 
        return ( 
            // 點擊事件            this.props.content 子接
        <li onClick = {this.handleClick}>
        {this.props.avname}--爲你服務 : {this.props.content}
        </li>
         );
    }

如果 在校驗的時候加上關鍵字isRequired，這事 父組件如果不傳過來參數，這裏就會報錯，我們就需要在父組件裏進行傳參 或者 在子組件中使用defalutProps 默認值

    //若父組件 不傳值這裏寫成默認的
    xiaojiejieItem.defaultProps = {
        avname:"小莊"
    }

注意官網還有很多校驗其他數據類型的方法，這裏不一一舉例
https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html#gatsby-focus-wrapper