React での Props の検証

1. React の Props とは何ですか?

props (「プロパティ」の略) は、あるコンポーネントから別のコンポーネント (通常は親コンポーネントから子コンポーネント) にデータとイベント ハンドラーを渡すためのメカニズムです。

親コンポーネント

import React from 'react';

const App = () => {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
};

export default App;

props を受け取る子コンポーネント

const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

2. なぜ小道具を検証するのか?

プロパティを検証すると、コンポーネントが正しいタイプのデータを受け取り、必要なプロパティが提供されることが保証されます。これは次のことに役立ちます:

• バグを防ぎます。

• コンポーネントをより予測しやすくする

たとえば、コンポーネントが文字列を予期していても数値を受け取った場合、予期しない動作が発生する可能性があります。

3. 検証に PropType を使用する

React は、prop 検証を強制できる prop-types と呼ばれるパッケージを提供します。コンポーネントに渡された props が予期された型と一致しない場合、React はコンソールに警告を記録します。

4. prop-types パッケージのインストール

新しい React プロジェクトで作業している場合は、最初に prop-types パッケージをインストールする必要がある場合があります。

npm install prop-types

5. コンポーネントでの PropType の定義

propTypes オブジェクトをコンポーネントに追加することで、プロパティ タイプを定義できます。

import PropTypes from 'prop-types';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

こちら: 「​​name」プロパティを検証するための PropType の追加
「名前」が必須の文字列であることが期待されます

6. 一般的な PropType

適用できる一般的なタイプのプロパティ検証をいくつか示します:

1.プリミティブ型:

• PropTypes.string - プロップが文字列であることを確認します。
• PropTypes.number - プロパティが数値であることを確認します。
• PropTypes.bool - プロップがブール値であることを確認します。
• PropTypes.func - prop が関数であることを確認します。
• PropTypes.object - プロップがオブジェクトであることを確認します。
• PropTypes.array - プロップが配列であることを確認します。
• PropTypes.node - プロップがレンダリング可能なコンテンツ (数値、文字列、要素、
) であることを確認します。

2.必須の props: .isRequired を使用して、props が渡されるように強制します:

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

3.特定の型の配列: 配列を検証して、その内容が特定の型であることを確認できます:

MyComponent.propTypes = {
  items: PropTypes.arrayOf(PropTypes.string).isRequired, // Array of strings
};

4.特定の形状のオブジェクト:

MyComponent.propTypes = {
  user: PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number,
  }).isRequired,
};

5.値のセットの 1 つ: プロパティが複数の指定された値の 1 つであることを強制できます:

MyComponent.propTypes = {
  status: PropTypes.oneOf(['success', 'error', 'loading']).isRequired,
};

6.カスタム プロップ検証: 独自のカスタム検証ロジックを作成できます:

MyComponent.propTypes = {
  age: function (props, propName, componentName) {
    if (props[propName] < 18) {
      return new Error(
        `${propName} in ${componentName} must be at least 18 years old`
      );
    }
  },
};

7. 小道具の検証の例

いくつかのタイプの props を期待するコンポーネントを作成して、それらを検証してみましょう:

import React from 'react';

const App = () => {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
};

export default App;

8. デフォルトの小道具

プロパティが提供されない場合は、defaultProps を使用してデフォルトのプロパティを定義することもできます。

const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

9. 無効な Prop タイプの処理

プロパティのタイプが正しくない場合、React はブラウザーのコンソールに警告を記録しますが、アプリケーションは引き続き動作します。 PropType は開発モードでのみ実行される (つまり、実稼働ビルドでは実行されない) ことに注意することが重要です。

以上がReact での Props の検証の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。