React用Sitecore JavaScriptレンダリングSDK (JSS)

Sitecoreヘッドレス開発
Sitecore JavaScriptレンダリングSDK (JSS)
React用Sitecore JavaScriptレンダリングSDK (JSS)
React アプリケーションで Sitecore フィールドをレンダリングするための JSS コンポーネント

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

Version:

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

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

JSS for Reactは、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ノード。デフォルト値はファイルです。

名前

形容

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テキストフィールドの未加工の値をレンダリングする場合は、importステートメントに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"
/>

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