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

JSS Reactサンプルアプリでのプレースホルダーの扱い方

Version:

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

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

JSS Reactアプリでプレースホルダーを使う方法はいくつかあります。

!ヒントプレースホルダーとは何か、どのように機能するかを理解するために、JSSアプリのプレースホルダーガイドを読むことをお勧めします。

基本的なプレースホルダー技術

コンポーネントにプレースホルダーを追加する最も一般的な方法は、Placeholderコンポーネントを使うことです。

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

const App = ({ rendering }) => (

My App

Version:

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

);

Placeholder成分について:

nameは、あなたが露出させようとしているプレースホルダーの鍵です。
renderingは以下を表すことができます:
- 現在のSitecore提供のレイアウト/ルートデータ。
- 他のコンポーネント内でプレースホルダーを公開する場合は、親コンポーネントデータを使います。

高次成分プレースホルダー技術

高次コンポーネント(HOC)パターンは、プレースホルダー内のコンポーネントの配列をプロパティとして注入し、プレースホルダーを露出させる仕組みです。

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

const Tabs = ({ tabs }) => { return (

{tabs}

); };

export default withPlaceholder('tabs')(Tabs);

コンポーネント配列をエミュレートすると、アプリケーションはエミュレートした場所でコンポーネントをレンダリングします。この手法の主な利点は、ラッパーコンポーネントがないことです。 Placeholderコンポーネントを使用すると、すべての子コンポーネントがコンポーネントツリーの下にレンダリングされます。この方法でプレースホルダーを出すと、そのプレースホルダーにはラップコンポーネントがなく、インラインでレンダリングされます。この方法は、以下の例のように特定のコンポーネント階層に基づくライブラリを使う場合に便利react-fullpage:

Page 1

Page 2

Page 3

前のサンプルでは、コンポーネント階層がSectionsContainer->Sectionであることが期待されています。もし望むなら、プレースホルダーを使ってSectionコンポーネントを追加し、Sitecore定義することもできます。 Placeholderコンポーネントを使ってこれを行う場合、階層はSectionsContainer -> Placeholder -> YourComponent -> Section:

HOCベースのプレースホルダーを使えば、インラインコンポーネントまたはコンポーネント変換のいずれかでこれを解くことができます。

インライン部品

ライブラリが単一のコンポーネントラップ層を禁止しない場合は、子コンポーネントをレンダリングコンポーネントに配置できます。 SectionsContainer -> YourComponent -> Sectionのようなコンポーネント階層の取得:

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

const ContainerComponent = ({ sectionsPlaceholder }) => { return {sectionsPlaceholder}; };

// you can also alias the property for the placeholder when using the HOC - or pass an array of placeholders export const ContainerSitecoreComponent = withPlaceholder({ placeholder: 'sections', prop: 'sectionsPlaceholder' })(ContainerComponent);

// the

is in the child Sitecore component added to the placeholder export const ChildSitecoreComponent = (props) => (

Your JSS or other React components here

Version:

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

);

コンポーネント変換

この例のSectionsContainer -> Sectionのように完全にフラットなコンポーネント階層を作りたい場合は、配列であることを活かして、map関数を使って子コンポーネントをラッパーで変換できます。子Sitecoreコンポーネントはラッピングを完全に認識せず、自分のコンテンツのみをレンダリングすることで、この技術を使うことで関心事を明確に分離できます。

const ContainerComponent = ({ sectionsPlaceholder }) => { return ( {sectionsPlaceholder.map((component, index) => { // this if is important, as it prevents breakage when using Sitecore Experience Editor if (component.props && component.props.type === 'text/sitecore') return component;

// wraps _all_ child components in a

component return

{component}

; })} ); };

export const ContainerSitecoreComponent = withPlaceholder({ placeholder: 'sections', prop: 'sectionsPlaceholder' })(ContainerComponent);

Render Props API

JSS高次コンポーネントよりもレンダープロップスパターンをサポートしています。コンポーネントのrenderプロパティを使えば、高次コンポーネントと同様にプレースホルダーコンテンツのレンダリングを引き継ぎ、動的プロパティを利用できます。

以下の例は、コンポーネント配列を取得し、renderプロパティを使ってレンダリングする方法を示しています。

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

const App = ({ rendering }) => (

My App

Version:

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

{components}

} />

);

プレースホルダーのレンダリング関数に対して、オプションで2つの引数を使用できます:

propsパラメータは、に渡される性質のミラーです。
placeholderDataパラメータは現在のプレースホルダーのレイアウトデータを提供します。

直接的なプレースホルダー内省

もしプレースホルダーのコンポーネントではなくデータにアクセスしたい場合も可能です。この手法の良いユースケースは、タブのようにパーツを2か所(タブタイトルとタブの内容)でレンダリングする必要がある場合です。プレースホルダー階層は大きなオブジェクトJavaScriptなので、props.renderingを使って自分でトラバースして子コンポーネントのデータやフィールドを発見できます:

const Tabs = ({ rendering, tabs }) => ( <Tab.Container>

{(rendering.placeholders.tabs || ) .filter((tab) => tab && tab.fields && tab.fields.title) .map((tab, index) => (

))}

{tabs}

);

export default withPlaceholder('tabs')(Tabs);

技術的には、この技術を用いてプレースホルダーを完全カスタムでレンダリングすることも可能ですが、プレースホルダーコンポーネントやHOCを一切使わずに可能です。通常は推奨しません。

プレースホルダーの強化

Placeholderコンポーネントは開発者体験を向上させるいくつかのカスタマイズをサポートしています。同じカスタマイズは、HOCのプレースホルダーでも、propsTransformerオプションを使って同じプロップを関数で注入することで可能です。

誤差成分

プレースホルダーでレンダリングエラーが発生した場合、プレースホルダーはその内容の代わりにエラーコンポーネントを表示し、エラーの詳細をコンソールに記録します。このコンポーネントはerrorComponentプロップを使って自分のReactコンポーネントを置き換えることでカスタマイズできます。

欠損コンポーネント

もしプレースホルダーにcomponentFactoryに未知のレンダリング名が含まれている場合(例えば、バックエンド開発者がFooレンダリングを作成しページに追加するが、まだFoo.jsがない場合)、レンダリングはReactコンポーネントのmissingComponentComponentプロパティで定義されたMissingComponentコンポーネントに置き換えられます。デフォルトの実装はシンプルなメッセージですが、missingComponentComponentプロパティで自分のReactコンポーネントを使ってカスタマイズできます。

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