Skip to main content

はじめに

カスタムコンポーネントはプロパティ定義 (propTypes) に対応しており、プロパティレベルでコンポーネントを拡張できます。カスタムプロパティを追加することで、カスタマイズ性を高めつつコンポーネントをより柔軟にし、業務要件に適合させることが可能です。以下の図をご参照ください。 コンポーネントプロパティは「Add Item」ボタンで追加、「Edit」ボタンで変更、「Delete」ボタンで削除できます。「Edit」ボタンをクリックすると、コンポーネントプロパティのすべての設定項目を確認できます。以下の図をご参照ください。 カスタムコンポーネントのすべてのプロパティ定義は、コンポーネントプレビューページ(シンプルなプロパティタイプのデバッグ用)で確認・設定できるほか、アプリにコンポーネントをインストールした後(コード関連のデバッグを含む複雑なプロパティ設定用)にも設定できます。以下の図をご参照ください。 各設定項目の詳細は以下のとおりです。

プロパティタイトル

カスタムコンポーネントに設定するプロパティ名です。プロパティタイトルのデフォルト値は「Property Title」です。分かりやすく直感的なタイトルを設定することで、ユーザーがプロパティの意味を理解しやすくなり、入力すべき内容を判別しやすくなります。 このコンポーネントをページ上で使用すると、以下の図のように表示されます。

プロパティ名

コンポーネントのプロパティ名はプロパティ Key であり、クラス内の props.xxx に相当します。デフォルト値は propName です。ページ設計で変数バインディングを行い、コンポーネントを制御できます。例えば、カスタムコンポーネントのプロパティ値を、その内部にネストされたコンポーネントのタイトルとして利用できます。以下の図をご参照ください。
注意:コンポーネントのプロパティ名は空欄にできません。空欄の場合、呼び出し時や値の代入時にエラーが発生します。

プロパティタイプ

コンポーネントのプロパティタイプは一般的なデータ型に類似しています。Text、真偽値、Number、オブジェクト、配列、関数、Element の 7 種類があります。各データ型には複数の セッター が対応しており、さまざまな側面からデータを処理するニーズに応えます。以下の図をご参照ください。

セッター

プロパティタイプが異なるコンポーネントには、それぞれ異なるプロパティセッターが用意されており、多様なコンポーネントレンダリングやデータ処理方法に対応します。例えば、Text タイプには 5 つのセッターが対応しています。以下の図をご参照ください。

デフォルト

ユーザーがフォームにアクセスした際に、カスタムコンポーネントにデフォルトで表示されるフィールドです。効果は以下の図のとおりです。

変数バインディングを有効化

ページ設計における変数バインディングです。

非表示

プロパティを非表示にするかどうかを制御します。使用頻度の低い項目です。

On Change

複数のプロパティを連動させる際に使用します。使用頻度の低い項目です。

レイアウト

ブロックインライン の 2 つの選択肢があり、カスタムコンポーネントのページ上での配置方法を設定します。