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

コンポーネントにプレースホルダーを追加する最も一般的な方法は、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コンポーネントの場合:

高次コンポーネント (HOC) パターンを使用すると、プレースホルダー内のコンポーネントの配列を取得し、プレースホルダーを公開するコンポーネントにプロパティとして挿入できます。

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

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

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

component配列を出力すると、アプリケーションはコンポーネントを出力した場所にレンダリングします。この手法の主な利点は、ラッパー コンポーネントがないことです。 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ベースのプレースホルダーを使用すると、インラインコンポーネントまたはコンポーネント変換のいずれかでこれを解決できます。

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>
);

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);

JSSは、高階コンポーネントよりもrender propsパターンを好む場合にサポートします。<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つの省略可能な引数を使用できます。

コンポーネントではなくプレースホルダのデータにアクセスしたい場合も、それが可能です。この手法の良い使用例は、タブなどのコンポーネントで、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コンポーネントは、開発者のエクスペリエンスを向上させることができるいくつかのカスタマイズをサポートしています。HOCプレースホルダーでも、関数を使用して同じpropsを注入するpropsTransformerオプションを使用して、同じカスタマイズが可能です。