有形狀的 React Proptype 陣列

1. React 中的 PropTypes 形狀
2. まとめ

在 React 上編碼是一種愉快的練習，直到部署應用程式並且應用程式由於錯誤和錯誤而失敗。

值得慶幸的是，我們有 React 的 proptype 依賴項來幫助我們擺脫困境。React 中的 props 是屬性的縮寫，React 中的 props 有不同的：數字、字串、布林值、物件等。

proptype 所做的是檢查我們在程式碼中傳遞的道具的型別，以確保它是正確的；當我們傳遞一個錯誤時，proptype 會通過瀏覽器的控制檯發出警報。

React 中的 PropTypes 形狀

PropTypes.Shape() 提供更深層次的型別檢查和驗證；它掃描陣列的內部結構以查詢錯誤的道具。

要使用此功能，我們需要將其安裝在我們正在處理的專案資料夾中，方法是輸入：npm i prop-types。安裝完成後，我們進入編碼部分。

讓我們看一個展示 PropTypes.shape() 的例子。

在 src 資料夾中，我們將建立一個新檔案，將其命名為 Component.js，導航到該檔案，然後匯入 proptypes，如下所示。

程式碼片段 - Component.js：

import PropTypes from 'prop-types'

function Component() {
  return null
}

Component.propTypes = {
  person: PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number,
  })
}

export default Component;

由於我們希望 proptypes 在 App.js 中檢查我們要呈現的日期的字串和數字屬性，我們將 name 和 age 元件包裝在 PropTypes.shape 中。

接下來，我們導航到 App.js 檔案並匯入 Component.js 檔案，如下所示。

程式碼片段 - App.js：

import Component from './Component'

function App() {
  return < Component person = {
    {
      name: 'Kyle', age: '26'
    }
  } />
}

export default App

輸出：

如果我們開啟瀏覽器的控制檯，我們會在附加的螢幕截圖中看到錯誤，因為 age 屬性是作為字串而不是數字傳遞的。一旦更正此異常，錯誤日誌就會消失。

這就是使用 proptype 依賴的美妙之處。

まとめ

PropTypes 的有效性不能被高估，因為它非常適合當場檢測錯誤和錯誤。它可以幫助我們編寫更準確和結構良好的程式碼。