React の形状を持つ proptype 配列

1. React の PropTypes シェイプ
2. まとめ

React でのコーディングは、アプリをデプロイし、エラーやバグが原因でアプリが失敗するまでは、楽しい演習です。

ありがたいことに、私たちを救済するための React の proptype 依存関係があります。React の小道具はプロパティの略で、React にはさまざまな小道具があります：数値、文字列、ブール値、オブジェクトなど。

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 にレンダリングしたい日付の文字列と数値の小道具をチェックアウトするようにしたいので、PropTypes.shape 内に name と age コンポーネントをラップします。

次に、App.js ファイルに移動し、以下のように Component.js ファイルをインポートします。

コードスニペット-App.js：

import Component from './Component'

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

export default App

出力：

ブラウザのコンソールを開くと、添付のスクリーンショットにエラーが表示されます。これは、age prop が数値ではなく文字列として渡されるためです。この異常が修正されると、エラーログは消えます。

これは、proptype 依存関係を利用することの素晴らしさです。

まとめ

PropTypes の有効性は、その場でエラーやバグを検出するのに最適であるため、過大評価することはできません。これは、より正確で適切に構造化されたコードを作成するのに役立ちます。