iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
Modern Web

用30天更加認識 React.js 這個好朋友系列 第 26

Day26-React PropTypes & DefaultProps

在 React 中有內建的方法可以去定義傳入元件的 props 資料型別,這樣可以更清楚的瞭解傳入的各 props 的型別是什麼。

此外如果傳入的 props 型別和已經寫好的 propTypes 定義的型別不同的話,也會自動檢查並跳出錯誤訊息,避免一些意外的錯誤。

安裝

要使用 PropTypes 的話,需先安裝 prop-types

npm install --save prop-types

然後在會用到 prop-types 的檔案引入即可。

import PropTypes from 'prop-types'; // ES6
var PropTypes = require('prop-types'); // ES5 with npm

PropTypes 語法

語法相當簡單易懂,就是 JS 物件的寫法。

以下舉例,ComponentName 的部分替換成元件的名稱,每個 key 代表 component 定義的 prop 的名稱,每個 key 的 value 則定義 component prop 的型別

import PropTypes from 'prop-types';

ComponentName.propTypes = {
  propName: PropTypes.array,
  // ...
}

以下列舉許多判斷 props 的 JS 型別,我們也可以在型別後面加上 required,表示一定要有這個 prop

ComponentName.propTypes = {
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,
  // 加上 isRequired
  optionalArray: PropTypes.array.isRequired,
}

PropTypes.node 用來檢查 prop 是否是可以被 React render 的型別,包括以下幾種:

  • React elements
  • Fragment
  • numbers
  • strings
  • array
ComponentName.propTypes = {
  optionalNode: PropTypes.node,
}

檢查 prop 是否為 React element:

ComponentName.propTypes = {
  optionalElement: PropTypes.element,
}

檢查 prop 是否是元件的名字:

ComponentName.propTypes = {
  optionalElementType: PropTypes.elementType,
}

檢查 prop 是否為某個 class 的 instance:

ComponentName.propTypes = {
  optionalMessage: PropTypes.instanceOf(Message),
}

PropTypes.oneOf() 用來檢查 prop 是否為陣列內指定的值之一:

ComponentName.propTypes = {
  optionalEnum: PropTypes.oneOf(['News', 'Photos']),
}

用來檢查 prop 是否為陣列內指定的型別之一:

ComponentName.propTypes = {
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),
}

用來檢查 prop 是否為指定型別組成的陣列,以下範例可以檢查是不是由數字組成的陣列:

ComponentName.propTypes = {
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
}

用來檢查 prop 是否為指定型別組成的物件:

ComponentName.propTypes = {
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),
}

用來檢查 prop 是否為指定 key 組成的物件:

ComponentName.propTypes = {
  optionalObjectWithShape: PropTypes.shape({
    optionalProperty: PropTypes.string,
    requiredProperty: PropTypes.number.isRequired
  }),
}

用來檢查 prop 是否為指定 key 組成的物件,且此物件不可以有額外的 key。如果有額外的 key,React 就會顯示警告:

ComponentName.propTypes = {
  optionalObjectWithStrictShape: PropTypes.exact({
    optionalProperty: PropTypes.string,
    requiredProperty: PropTypes.number.isRequired
  }),
}

代表一個 prop 可以是任意的內容:

ComponentName.propTypes = {
  requiredAny: PropTypes.any.isRequired,
}

Component 的 children 也可以被檢查,以下為範例:

ComponentName.propTypes = {
  children: PropTypes.number
}

DefaultProps

如果 props 裡面沒有傳 propTypes 設定的檢查值的時候,就會將 DefaultProps 的值當作 props 的預設值。

使用範例如下:

function ComponentName(props) {
  return <div>{props.name}</div>
}

ComponentName.propTypes = {
  name: PropTypes.string,
}

ComponentName.defaultProps = {
  name: 'Harry',
}

參考資料

I Want To Know React - PropTypes & DefaultProps

PropTypes in React: A complete guide


上一篇
Day25-React 效能優化篇-下篇(介紹 React Profiler)
下一篇
Day27-介紹 React Developer Tools
系列文
用30天更加認識 React.js 這個好朋友32

尚未有邦友留言

立即登入留言