JSS React サンプル アプリでのプレースホルダーの操作

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

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

JSS React アプリでプレースホルダーを使用するには、いくつかの方法があります。

ヒント

JSS アプリでのプレースホルダーについてのガイドをお読みになり、プレースホルダーの概要とその動作を理解することをお勧めします。

プレースホルダーの基本的なテクニック

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

RequestResponse
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) パターンを使用すると、プレースホルダーを公開するコンポーネントにプロパティとして挿入されたプレースホルダー内のコンポーネントの配列を取得できます。

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

const Tabs = ({ tabs }) => {
  return (
    <div>
      {tabs}
    </div>
  );
};

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

コンポーネント配列を発行すると、アプリケーションはコンポーネントを発行した場所にレンダリングします。このテクニックの主な利点は、ラッパー コンポーネントがないことです。Placeholder コンポーネントを使用する場合、すべての子コンポーネントは、コンポーネント ツリーでその下にレンダリングされます。このテクニックでプレースホルダーを発行すると、プレースホルダーにはラッピング コンポーネントがなく、インラインでレンダリングされます。このアプローチは、次の react-fullpage の例に示すように、特定のコンポーネント階層に基づくライブラリを使用している場合に便利です。

RequestResponse
<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 のようになります。

RequestResponse
<SectionsContainer>
  <Placeholder name="jss-sections" rendering={rendering} />
</SectionsContainer>

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

インライン コンポーネント

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

RequestResponse
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 コンポーネントはラッピングをまったく認識せずにコンテンツのみをレンダリングして、このテクニックを使用する場合の懸念事項を明確に分離することができます。

RequestResponse
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 プロパティを使用して、高次コンポーネントと同じ方法でプレースホルダーのコンテンツのレンダリングを引き継ぎ、動的プロパティを使用できます。

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

RequestResponse
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 を使用してその階層をトラバースし、子コンポーネントのデータとフィールドを探索できます。

RequestResponse
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 プロパティを使用することで、コンポーネントを作成し、プレースホルダーに提供できます。

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、