はじめに
カスタムコンポーネントはプロパティ定義 (propTypes) に対応しており、プロパティレベルでコンポーネントを拡張できます。カスタムプロパティを追加することで、カスタマイズ性を高めつつコンポーネントをより柔軟にし、業務要件に適合させることが可能です。以下の図をご参照ください。
コンポーネントプロパティは「Add Item」ボタンで追加、「Edit」ボタンで変更、「Delete」ボタンで削除できます。「Edit」ボタンをクリックすると、コンポーネントプロパティのすべての設定項目を確認できます。以下の図をご参照ください。
カスタムコンポーネントのすべてのプロパティ定義は、コンポーネントプレビューページ(シンプルなプロパティタイプのデバッグ用)で確認・設定できるほか、アプリにコンポーネントをインストールした後(コード関連のデバッグを含む複雑なプロパティ設定用)にも設定できます。以下の図をご参照ください。
各設定項目の詳細は以下のとおりです。
プロパティタイトル
カスタムコンポーネントに設定するプロパティ名です。プロパティタイトルのデフォルト値は「Property Title」です。分かりやすく直感的なタイトルを設定することで、ユーザーがプロパティの意味を理解しやすくなり、入力すべき内容を判別しやすくなります。
このコンポーネントをページ上で使用すると、以下の図のように表示されます。
プロパティ名
コンポーネントのプロパティ名はプロパティ Key であり、クラス内の props.xxx に相当します。デフォルト値は propName です。ページ設計で変数バインディングを行い、コンポーネントを制御できます。例えば、カスタムコンポーネントのプロパティ値を、その内部にネストされたコンポーネントのタイトルとして利用できます。以下の図をご参照ください。
注意:コンポーネントのプロパティ名は空欄にできません。空欄の場合、呼び出し時や値の代入時にエラーが発生します。
プロパティタイプ
コンポーネントのプロパティタイプは一般的なデータ型に類似しています。Text、真偽値、Number、オブジェクト、配列、関数、Element の 7 種類があります。各データ型には複数の セッター が対応しており、さまざまな側面からデータを処理するニーズに応えます。以下の図をご参照ください。
セッター
プロパティタイプが異なるコンポーネントには、それぞれ異なるプロパティセッターが用意されており、多様なコンポーネントレンダリングやデータ処理方法に対応します。例えば、Text タイプには 5 つのセッターが対応しています。以下の図をご参照ください。
デフォルト
ユーザーがフォームにアクセスした際に、カスタムコンポーネントにデフォルトで表示されるフィールドです。効果は以下の図のとおりです。
変数バインディングを有効化
ページ設計における変数バインディングです。
非表示
プロパティを非表示にするかどうかを制御します。使用頻度の低い項目です。
On Change
複数のプロパティを連動させる際に使用します。使用頻度の低い項目です。
レイアウト
ブロック と インライン の 2 つの選択肢があり、カスタムコンポーネントのページ上での配置方法を設定します。