React で Props 検証を使用する方法チュートリアル

この記事では、React チュートリアルの Props 検証 (Props Validation) の具体的な使い方を主に紹介します。必要な方は参考にしてください。

Props 検証は、コンポーネントを正しく使用するための非常に便利な方法です。アプリケーションが複雑になるにつれて発生する可能性のある多くのバグや問題を回避できます。また、プログラムをより読みやすくすることもできます。

では、Props を検証するにはどうすればよいでしょうか? React は検証用の PropType を提供します。 Props に渡すデータが無効な場合 (つまり、Props に渡したデータ型が検証されたデータ型と一致しない)、コンソールに警告メッセージが表示されます。

下の例を見てください

var Propsva = React.createClass({
  propTypes: {
    optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,
  },
  getDefaultProps:function(){
    return {
      optionalArray: ['onmpw.com','——迹忆博客'],
      optionalBool: true,
      optionalFunc: function (arg) {
        console.log(arg);
      },
      optionalNumber: 3,
      optionalObject: {
        object1: "objectvalue1",
        object2: "objectvalue2",
        object3: "objectvalue3",
      },
      optionalString: "My Onmpw",
    };
  },
  render:function(){
    return (
      <p>
        <h3>Array:{this.props.optionalArray}</h3>
        <h3>Bool:{this.props.optionalBool}</h3>
        <h3 onClick={this.props.optionalFunc}>Func:click</h3>
        <h3>Number:{this.props.optionalNumber}</h3>
        <h3>Object:{this.props.optionalObject.object1}</h3>
        <h3>Object:{this.props.optionalObject.object2}</h3>
        <h3>Object:{this.props.optionalObject.object3}</h3>
        <h3>String:{this.props.optionalString}</h3>
      </p>
    );
  }
});
ReactDOM.render(
  <Propsva />,
  document.getElementById(&#39;content&#39;)
);

もちろん、上記の例には何も問題はありません。上記の例を変更してみましょう

getDefaultProps:function(){
  return {
    optionalArray: 'onmpw.com——迹忆博客',
    optionalBool: true,
    optionalFunc: function (arg) {
      console.log(arg);
    },
    optionalNumber: 3,
    optionalObject: {
      object1: "objectvalue1",
      object2: "objectvalue2",
      object3: "objectvalue3",
    },
    optionalString: "My Onmpw",
  };
},

その後、コンソールに次の警告が表示されます

Warning: Failed propType: Invalid prop `optionalArray` of type `string` provided to `Propsva` , Expected `array `.

Propsのデータ型を検証するケースです。もう 1 つの状況は、Props に値があるかどうかを確認することです。以下のコードを見てください

propTypes: {
  optionalArray: React.PropTypes.array.isRequired,
  optionalBool: React.PropTypes.bool.isRequired,
  optionalFunc: React.PropTypes.func,
  optionalNumber: React.PropTypes.number,
  optionalObject: React.PropTypes.object,
  optionalString: React.PropTypes.string,
},

React.PropTypes.array と React.PropTypes.bool の後に isRequired を追加します。これは、optionalArray とOptionalBool に値が必要であることを示しています

getDefaultProps:function(){
  return {
    optionalFunc: function (arg) {
      console.log(arg);
    },
    optionalNumber: 3,
    optionalObject: {
      object1: "objectvalue1",
      object2: "objectvalue2",
      object3: "objectvalue3",
    },
    optionalString: "My Onmpw",
  };
},

上記のコードでは、optionalArray とOptionalBool を削除しますをクリックし、ブラウザでコードを実行すると、コンソールに次のエラーが報告されることがわかります

警告: 失敗した propType: Required prop `optionalArray` が `Propsva` で指定されていませんでした。
警告: 失敗した propType:必須の prop `optionalBool` が `Propsva` で指定されていませんでした。

もちろん、上記は 2 つの単純なケースにすぎません。 Props の検証にはさまざまな検証形式があります。詳細については、React の公式ドキュメントを参照してください。

ここで、説明が必要な知識ポイントが getDefaultProps です。これは Props へのデフォルトの割り当てです。以下のコードを見てください

var ComponentDefaultProps = React.createClass({
  getDefaultProps: function() {
    return {
      value: 'Default Value'
    };
  },
  render:function(){
    return (
      <p>{this.props.value}</p>
    )
  }
});
ReactDOM.render(
  <ComponentDefaultProps />,
  document.getElementById(&#39;content&#39;)
);

getDefaultProps() は、親コンポーネントが Props を渡さない場合に、現在のコンポーネントがデフォルトの Props 値を持つことを保証します。 getDefaultProps によって返された結果はキャッシュされることに注意してください。したがって、意味のない繰り返しコードを手動で記述することなく、Props を直接使用できます。

以上がReact で Props 検証を使用する方法チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。