1. ReactのSitecore JavaScriptレンダリングSDK (JSS)

ReactアプリケーションでSitecoreフィールドをレンダリングするためのJSSコンポーネント

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

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

React用JSSは、ReactアプリケーションでSitecoreフィールドをレンダリングするのに役立つコンポーネントを提供します。

次の表は、Sitecoreフィールド タイプとJSS Reactコンポーネント間の対応を示しています。

Sitecoreフィールド タイプ

JSS Reactコンポーネント

日付

Date

ファイル

File

画像

Image

一般リンク

Link

1行テキスト、複数行テキスト、または数値型

Text

リッチテキスト

RichText

以下は、サポートされているコンポーネントのリストとその使用例です。この例では、フィールド データはPlaceholderコンポーネントによって提供されます。

日付

Dateコンポーネントは、JSSアプリケーションで日付と時刻のコンテンツ フィールドをレンダリングするのに役立ちます。

Dateコンポーネントには、次のプロパティがあります。

名前

形容

デフォルト

field

必須。

レンダリングするフィールド。Sitecoreの日付タイプである必要があります。

-

tag

日付値をラップするHTML要素の名前。

span

editable

インライン編集を明示的に有効/無効にします。 trueとfield.editableに値がある場合、field.editableは処理され、コンポーネント出力としてレンダリングされます。 falseの場合、field.editable値は無視され、レンダリングされません。

true

render

解析されたJavaScript Dateオブジェクトとしてフィールド値を受け取り、コンポーネントのラッピングtagにレンダリングする値を返す関数。これは、日付と日時のローカリゼーションの値を書式設定するために使用できます。

-

使い

フィールドを使用するには、コンポーネントにインポートする必要があります。

import { DateField } from '@sitecore-jss/sitecore-jss-react';

このコンポーネントは、次のように使用できます。

  • 単純な日付フィールドをレンダリングするには:

    <DateField field={props.fields.date} />

  • datetimeフィールドをレンダリングするには:

    <DateField field={props.fields.dateTime} />

  • 日付をUTC形式の文字列としてレンダリングするには:

    <DateField field={props.fields.date} render={(date) => date.toUTCString()} />
    メモ

    renderプロパティは、編集モードでは無視されます。

    このコンポーネントは、フォーマットのためにJS Dateオブジェクトへの直接アクセスを提供します。したがって、これを使用して、次のようにローカライズされた日付文字列と日時文字列をレンダリングできます。

    <DateField field={props.fields.date} render={(date) => date.toLocaleDateString()} />
<DateField
  field={props.fields.dateTime}
  render={(date) => <em>{date.toLocaleString()}</em>}
/>

ファイル

Fileコンポーネントは、ファイルリンクをレンダリングします。

Fileコンポーネントには、次のプロパティがあります。

名前

形容

value

必須。

レンダリングするルート フィールド。これは、プロパティがsrc、title、displayNameを持つSitecoreファイルタイプを表します。

children

レンダリングされた <a/> タグを設定するReactノード。デフォルト値はファイルです。

大事な

Fileフィールドは、エクスペリエンスエディターでのインライン編集をサポートしていません。ただし、コンポーネントのデフォルトのフィールドエディタを使用して編集できます。

使い

フィールドを使用するには、コンポーネントにインポートする必要があります。

import { File } from '@sitecore-jss/sitecore-jss-react';

このコンポーネントは、次のように使用できます。

  • 単純なファイルリンクをレンダリングするには:

    <File field={props.fields.file} />

  • カスタムアンカーテキストを含む新しいタブで開くファイルリンクをレンダリングするには:

    <File field={props.fields.file} target="_blank">
  View file
</File>W

画像

Imageコンポーネントを使用すると、編集可能でレスポンシブな画像をレンダリングできます。

Imageコンポーネントには、次のプロパティがあります。

名前

形容

field

必須。

画像フィールド データ。 ImageFieldValueまたはImageFieldオブジェクト タイプを受け入れます。

editable

画像のインライン編集を有効または無効にするために使用できるブール値。

デフォルト: true。

imageParams

画像のURLに追加されるクエリ文字列パラメーターに変換するImageSizeParametersの配列。

srcSet

ネイティブのイメージsrcset属性の値として使用されるコンマ区切りの文字列を生成するためのImageSizeParameters定義の配列。

mediaUrlPrefix

メディアURLプレフィックスを /-/jssmediaまたは /~/jssmediaに置き換えるカスタム正規表現。

大事な

imageParamsまたはsrcSetプロパティを使用する場合は、セキュリティ上の理由から、画像パラメータをサーバー上でホワイトリストに登録する必要があります。

追加のプロパティをコンポーネントに渡すことができます。たとえば、ネイティブ イメージのsizes属性の値を指定して、レスポンシブ サーバサイド レンダリング イメージを有効にすることができます。

使い

Imageコンポーネントを使用するには、コンポーネントにインポートする必要があります。

import { Image } from '@sitecore-jss/sitecore-jss-react';

Imageコンポーネントを使用して、次のものをレンダリングできます。

  • 簡単なイメージ:

    <Image media={props.fields.sample1} />

  • レスポンシブ画像:

    <Image
  field={props.fields.sample2}
  srcSet={[{ mw: 300 }, { mw: 100 }]}
  sizes="(min-width: 960px) 300px, 100px"
  className="img-fluid"
/>

  • 高度な構成のイメージ。たとえば、次のサンプルでは、エクスペリエンス エディターなどのSitecoreコンテンツおよびレイアウト エディターでは編集できない画像をレンダリングします。イメージは、imageParamsプロパティに基づいてサーバー側でサイズ変更されます。

     <Image
  field={props.fields.sample2}
  editable={false}
  imageParams={{ mw: 100, mh: 50 }}
  height="50"
  width="94"
  data-sample="other-attributes-pass-through"
/>

リンク

Linkコンポーネントは、一般リンクSitecoreフィールドタイプのコンテンツをレンダリングするのに役立ちます。

Linkコンポーネントには、次のプロパティがあります。

名前

形容

デフォルト

field

レンダリングするルート フィールド。Sitecoreの一般リンク タイプである必要があります。

-

editable

エディターを使用するか、Sitecore形式のHTML出力を使用するかを示します。

手記

Sitecoreからの編集可能な出力を使用する場合、LinkはSitecoreが提供するマークアップの周囲にラッパー スパンを作成し、このスパンにホスト要素属性を適用します。

true

showLinkTextWithChildrenPresent

子が存在する場合でもリンクの説明の表示を有効または無効にするブール式。

手記

Sitecoreエクスペリエンス エディターでは、技術的な制限によりこの設定は無視され、説明は常にレンダリングされます。

使い

Linkフィールドヘルパーコンポーネントを使用するには、コンポーネントにインポートする必要があります。

import { Link } from '@sitecore-jss/sitecore-jss-react';

Linkコンポーネントを使用して、次のものをレンダリングできます。

  • 外部リンク:

    <Link field={props.fields.externalLink} />

  • 内部リンク(HTMLまたはその他のコンポーネントを含む):

    <Link field={props.fields.internalLink}>
  <em>HTML</em> or other components can be used within link renderers, for example, links to images.
</Link>

  • メールリンク:

    <Link field={props.fields.emailLink} />

  • コンテンツパラメータリンク:

     <Link field={props.fields.paramsLink} />

リンクコンポーネントは、追加のプロパティまたは属性を受け入れます。例えば：

<Link
  field={props.fields.externalLink}
  showLinkTextWithChildrenPresent={true}
  className="font-weight-bold"
  data-otherattributes="pass-through-to-anchor-tag"
/>
手記

エクスペリエンス エディター エディター モードでは、リンクの説明が常にレンダリングされます。リンクに子がある場合、それらはリンクの説明の兄弟としてレンダリングされます。

テキスト

Textコンポーネントは、Sitecore 1行テキスト、複数行テキスト、または数値フィールドを表示するのに役立ちます。

Textコンポーネントには、次のプロパティがあります。

名前

形容

デフォルト

field

レンダリングするフィールド。

-

tag

テキスト値を折り返すHTML要素の名前。

span

editable

エディターを使用するか、Sitecore形式のHTML出力を使用するかを示します。

true

encode

出力値のHTMLエンコードを有効または無効にします。falseの値は、editable: falseも意味します。

true

複数行テキストの場合、指定された編集可能な値では、改行はすべて <br />に置き換えられます。編集不可の値を使用する場合は、field.valueを処理して改行JSON目的のマークアップに置き換えるか、pre-wrapなどのCSS空白値を使用できます。

使い

Textコンポーネントを使用するには、コンポーネントにインポートする必要があります。

import { Text } from '@sitecore-jss/sitecore-jss-react';

レンダリングできるもの:

  • デフォルトのオプションを持つテキストフィールド:

    <Text field={props.fields.sample} />

  • カスタムタグ、CSSクラス、カスタム属性を含む編集不可能なテキストフィールド:

    <Text
  field={props.fields.sample2}
  tag="section"
  editable={false}
  encode={false}
  className="font-weight-bold"
  data-sample="other-attributes-pass-through"
/>

Sitecoreテキストフィールドの未加工の値をレンダリングする場合は、インポートステートメントにgetFieldValue関数を追加します。その後、アプリケーションで生の値を検査できます。例えば：

<div>Raw value (not editable): {getFieldValue(props.fields, 'sample')}</div>

リッチテキスト

RichTextコンポーネントは、Sitecoreリッチテキストフィールドのレンダリングに役立ちます。

RichTextコンポーネントには、次のプロパティがあります。

名前

形容

デフォルト

field

レンダリングするフィールド。

-

tag

テキスト値を折り返すHTML要素の名前。

div

editable

エディターを使用するか、Sitecore形式のHTML出力を使用するかを示します。

true

使い

RichTextコンポーネントを使用するには、コンポーネントにインポートする必要があります。

import { RichText } from '@sitecore-jss/sitecore-jss-react';

レンダリングできるもの:

  • デフォルトのオプションを持つフィールド:

    <RichText field={props.fields.sample} />

  • カスタムタグ、CSSクラス、カスタム属性を持つ編集不可能なリッチテキストフィールド:

    <RichText
  field={props.fields.sample2}
  tag="section"
  editable={false}
  className="font-weight-bold"
  data-sample="other-attributes-pass-through"
/>
この記事を改善するための提案がある場合は、 お知らせください!