iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 15
1
Modern Web

30天React從入門到入坑系列 第 15

DAY15:React prop-types 型別檢查

javascript是弱型別,所以在型別錯誤時不會顯示錯誤,所以近幾年才會開發出TypeScript這種強型別的js,可以在開發時期顯示警告,編輯時期出現錯誤訊息來減少js出錯的機會。在react也有類似的型別檢查套件,型別檢查套件prop-types可以在開發時期進行檢查,它一樣會在console顯示警告訊息。prop-types包含:基本型別、陣列、物件...等,都能進行型別檢查。基本上大部份的型別都有支援語法撰寫也很簡潔,不需附加太多程式碼就能檢查型別。

prop-types
https://www.npmjs.com/package/prop-types
npm install --save prop-types

使用PropType.propTypes,針對props傳進來的參數"name, age, gender"進行型別檢查,分別定義"sting, number, enum"型別。

src/PropType.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class PropType extends Component {
  render() {
    return (
      <div>
        <p>
          Hi, {this.props.name}
        </p>
        <p>
          age: {this.props.age}
        </p>
        <p>
          gender: {this.props.gender}
        </p>
      </div>
    );
  }
}

PropType.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  gender: PropTypes.oneOf(['male', 'female'])
};

export default PropType;

PropType分別傳入"name:string, age:string, gender:men(Enum['male', 'female'])"

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import PropType from './PropType';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
  <PropType name={"john"} age={"23"} gender="men" /> ,
  document.getElementById('root'));
registerServiceWorker();

console顯示錯誤訊息

index.js:2177 Warning: Failed prop type: Invalid prop `age` of type `string` supplied to `PropType`, expected `number`.
    in PropType (at index.js:7)
Warning: Failed prop type: Invalid prop `gender` of value `men` supplied to `PropType`, expected one of ["male","female"].
    in PropType (at index.js:7)	

輸出畫面
https://ithelp.ithome.com.tw/upload/images/20180103/201073177mqqPjS48M.png


上一篇
DAY14:React-Bootstrap
下一篇
DAY16:React Error Boundaries
系列文
30天React從入門到入坑30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言