JSS React サンプル アプリでのプレースホルダーの操作
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
JSS React アプリでプレースホルダーを使用するには、いくつかの方法があります。
JSS アプリでのプレースホルダーについてのガイドをお読みになり、プレースホルダーの概要とその動作を理解することをお勧めします。
プレースホルダーの基本的なテクニック
プレースホルダーをコンポーネントに追加する最も一般的な方法は、Placeholder
コンポーネントの使用です。
import { Placeholder } from '@sitecore-jss/sitecore-jss-react';
const App = ({ rendering }) => (
<div>
<h1>My App</h1>
<Placeholder name="jss-main" rendering={rendering} />
</div>
);
Placeholder
コンポーネントに関しては:
-
name
は、公開するプレースホルダーのキーです。 -
rendering
は次を表します。-
Sitecoreで提供された現在のレイアウト/ルート データ。
-
別のコンポーネント内からプレースホルダーを公開する場合は、親コンポーネントのデータ。
-
高次コンポーネント プレースホルダーのテクニック
高次コンポーネント (HOC) パターンを使用すると、プレースホルダーを公開するコンポーネントにプロパティとして挿入されたプレースホルダー内のコンポーネントの配列を取得できます。
import { withPlaceholder } from '@sitecore-jss/sitecore-jss-react';
const Tabs = ({ tabs }) => {
return (
<div>
{tabs}
</div>
);
};
export default withPlaceholder('tabs')(Tabs);
コンポーネント配列を発行すると、アプリケーションはコンポーネントを発行した場所にレンダリングします。このテクニックの主な利点は、ラッパー コンポーネントがないことです。Placeholder
コンポーネントを使用する場合、すべての子コンポーネントは、コンポーネント ツリーでその下にレンダリングされます。このテクニックでプレースホルダーを発行すると、プレースホルダーにはラッピング コンポーネントがなく、インラインでレンダリングされます。このアプローチは、次の react-fullpage
の例に示すように、特定のコンポーネント階層に基づくライブラリを使用している場合に便利です。
<SectionsContainer>
<Section color="#69D2E7">Page 1</Section>
<Section color="#A7DBD8">Page 2</Section>
<Section color="#E0E4CC">Page 3</Section>
</SectionsContainer>
上記のサンプルでは、コンポーネント階層が SectionsContainer->Section
であることが想定されています。必要に応じて、プレースホルダーを使用して Section
コンポーネントを追加し、Sitecore でそれらを定義できるようにします。Placeholder
コンポーネントを使用してこれを行う場合、代わりに階層は SectionsContainer -> Placeholder -> YourComponent -> Section
のようになります。
<SectionsContainer>
<Placeholder name="jss-sections" rendering={rendering} />
</SectionsContainer>
HOC ベースのプレースホルダーを使用すると、インライン コンポーネントまたはコンポーネント変換のいずれかでこれを解決できます。
インライン コンポーネント
ライブラリが単一レイヤーのコンポーネント ラッピングを妨げない場合は、子コンポーネントをレンダリング コンポーネントに配置できます。SectionsContainer -> YourComponent -> Section
などのコンポーネント階層を取得します。
import { withPlaceholder } from '@sitecore-jss/sitecore-jss-react';
const ContainerComponent = ({ sectionsPlaceholder }) => {
return <SectionsContainer>{sectionsPlaceholder}</SectionsContainer>;
};
// 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 <Section> is in the child Sitecore component added to the placeholder
export const ChildSitecoreComponent = (props) => (
<Section>
<h1>Your JSS or other React components here</h1>
</Section>
);
コンポーネント変換
この例の SectionsContainer -> Section
のような完全にフラットなコンポーネント階層が必要な場合、配列としての挿入されたプロパティを利用し、map 関数を使用してラッパーを持つ子コンポーネントを変換できます。子 Sitecore コンポーネントはラッピングをまったく認識せずにコンテンツのみをレンダリングして、このテクニックを使用する場合の懸念事項を明確に分離することができます。
const ContainerComponent = ({ sectionsPlaceholder }) => {
return (
<SectionsContainer>
{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 <Section> component
return <Section key={index}>{component}</Section>;
})}
</SectionsContainer>
);
};
export const ContainerSitecoreComponent = withPlaceholder({ placeholder: 'sections', prop: 'sectionsPlaceholder' })(ContainerComponent);
プロップ API のレンダリング
高次コンポーネントを使用しない場合、JSS はレンダー プロップ パターンをサポートしています。<Placeholder>
コンポーネントの render
プロパティを使用して、高次コンポーネントと同じ方法でプレースホルダーのコンテンツのレンダリングを引き継ぎ、動的プロパティを使用できます。
次の例は、レンダリング プロパティを使用して、コンポーネント配列を取得し、レンダリングする方法を示しています。
import { Placeholder } from '@sitecore-jss/sitecore-jss-react';
const App = ({ rendering }) => (
<div>
<h1>My App</h1>
<Placeholder name="jss-main" rendering={rendering} render={(components, placeholderData, props) => <div>{components}</div>} />
</div>
);
プレースホルダーの render 関数には、次の 2 つのオプションの引数を使用できます。
-
props
パラメーターは、<Placeholder>
に渡されるプロパティを反映しています。 -
placeholderData
パラメーターは、現在のプレースホルダーのレイアウト データを提供します。
直接プレースホルダー イントロスペクション
コンポーネントの代わりにプレースホルダーのデータにアクセスすることもできます。このテクニックを使用するのによい例は、2 か所 (タブ タイトルとタブ コンテンツ) にレンダリングが必要なタブなどのコンポーネントです。プレースホルダー階層は大規模な JavaScript オブジェクトであるため、props.rendering
を使用してその階層をトラバースし、子コンポーネントのデータとフィールドを探索できます。
const Tabs = ({ rendering, tabs }) => (
<Tab.Container>
<div class="tabsHeading">
{(rendering.placeholders.tabs || [])
.filter((tab) => tab && tab.fields && tab.fields.title)
.map((tab, index) => (
<Tab.Heading key={index}>
<Text field={tab.fields.title} />
</Tab.Heading>
))}
</div>
<div class="tabContents">
{tabs}
</div>
</Tab.Container>
);
export default withPlaceholder('tabs')(Tabs);
技術的には、プレースホルダー コンポーネントや HOC を使用せずに、このテクニックを使用して完全にカスタマイズされたプレースホルダーを引き継いでレンダリングすることが可能です。通常、これはお勧めしません。
プレースホルダーの強化
Placeholder
コンポーネントは、開発者のエクスペリエンスを向上させるいくつかのカスタマイズをサポートしています。関数を使用して同じプロパティを注入するために、propsTransformer
オプションを使用して HOC プレースホルダーで同じカスタマイズが可能です。
エラー コンポーネント
プレースホルダーでレンダリング エラーが発生した場合、プレースホルダーにはプレースホルダーのコンテンツではなくエラー コンポーネントが表示され、エラーの詳細がコンソールに記録されます。このコンポーネントをカスタマイズするには、errorComponent
プロップを使って、独自の React コンポーネントを代わりに使用します。
MissingComponent コンポーネント
componentFactory
で認識されないレンダリング名がプレースホルダーに含まれている場合 (たとえば、バックエンド開発者が Foo レンダリングを作成し、それをページに追加したが、Foo.js
がまだ存在していない場合)、レンダリングは、React コンポーネントの missingComponentComponent
プロパティで定義された MissingComponent
コンポーネントに置き換えられます。既定の実装はシンプルなメッセージですが、missingComponentComponent
プロパティで独自の React コンポーネントを使用して、この実装をカスタマイズできます。
非表示のレンダリングの処理
レンダリングがパーソナライゼーション ルールによって非表示になっている場合、レンダリングに JSS 実装が欠落している際のエラー メッセージを回避するために、レンダリングは HiddenRendering
コンポーネントに置き換えられます。hiddenRenderingComponent
プロパティを使用することで、コンポーネントを作成し、プレースホルダーに提供できます。