ウォークスルー:外部Reactコンポーネントの登録方法

registerComponentメソッド

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

registerComponentメソッドはComponentビルダー内で外部コンポーネントを登録するフローの一部として呼びます。

輸入

registerComponent関数を有効にするには、まずインポートする必要があります。

import {registerComponent} from '@sitecore-feaas/clientside'
registerComponent(...);

構文論

registerComponent(component, options)

オプション

以下はサポート可能なパラメータの一覧です。必要なパラメータはnameのみです。 propertiesの一覧は、このコンポーネントの入力フィールドの定義であり、ページビルダー内でコンポーネントを使用する際にコンテンツ作成者が閲覧できます。 requiredパラメータとuiパラメータはこれらの性質を参照しています。

名称	種類	概要
name	文字列、必須	Components and Pagesインターフェースで表示するコンポーネントの名前。
description	ストリング	Components and Pagesインターフェースで表示するコンポーネントの説明。
thumbnail	URL	このコンポーネントのComponentsビルダーに表示されるサムネイル画像のURL。推奨寸法は280×520ピクセルです。
group	ストリング	例えば「デフォルトコレクション」のように、このコンポーネントが属するコンポーネントの集合です。
properties	JSONスキーマオブジェクト	コンポーネント入力プロパティを記述するJSONスキーマです。このコンポーネントを使用すると、Pagesユーザーにはそのスキーマに基づいて自動的に生成される設定インターフェース(UI)が表示されます。UIはui物件で提供されたuiSchemaに合わせてカスタマイズ可能です。
required	文字列配列	Pagesユーザーの入力を必要とするpropertiesキーの配列です。
ui	JSONスキーマオブジェクト	指定されたpropertiesに対するUI特有の構成。このオプションはuiSchemaオブジェクトを前提としています。

例

FEAAS.registerComponent(MyComponent, {
    name: 'MyComponent',
    description: 'Description of MyComponent.',
    required: ['firstName'],
    properties: {
       firstName: {
       type: 'string',
       title: 'First name',
       required: true
       },
       telephone: {
       type: 'string',
       title: 'Telephone',
       minLength: 10
       },
    },
    ui: {
    firstName: {
      'ui:autofocus': true,
      'ui:placeholder': 'Write your first name'
    },
    telephone: {
      'ui:options': {
        inputType: 'tel'
      }
    }
  }
});

この記事を改善するための提案がある場合は、お知らせください!