1. JSS Reactサンプル・アプリケーションの概要

ReactコンポーネントでのSitecoreコンテキスト データへのアクセス

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

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

JSSには、Sitecoreコンテキスト (つまり、コンポーネント レベルのデータではなく、ルート レベルのデータ) を任意のコンポーネントに挿入できるReact高次コンポーネント (HOC) が付属しています。

コンテキスト データが必要になる一般的な例としては、ルート レベルに保存されているページ タイトルやメタ キーワード フィールドを取得する場合や、高度なSitecoreエディターでアプリを使用するときにレンダリングを条件付きで変更する場合などがあります。次に、HOCの簡単な使用例を示します。

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

const MyComponent = (props) => <div>Page editing: {props.sitecoreContext.pageEditing}</div>;

// wrap MyComponent in the HOC (note the double function invocation - important)
export default withSitecoreContext()(MyComponent);

withSitecoreContext() HOCを使用するには、それを使用するコンポーネントを、コンテキスト状態を維持するSitecoreContextコンポーネントにラップする必要があります。たとえば、アプリケーションのルートコンポーネントで、次のようになります。

import React from 'react';
import { SitecoreContext } from '@sitecore-jss/sitecore-jss-react';
import { componentFactory } from './temp/componentBuilder';

export default class extends React.Component {
  constructor(props) {
    super(props);

    // Set default sitecoreContext
    if (props.ssrState) {
      this.sitecoreContext = props.ssrState.sitecore && props.ssrState.sitecore.route
        ? {
            route: props.ssrState.sitecore.route,
            itemId: props.ssrState.sitecore.route.itemId,
            ...props.ssrState.sitecore.context,
          }
        : props.ssrState.sitecore.context
    } else {
      this.sitecoreContext = null;
    }
  }

  render() {
    return (
      <SitecoreContext context={this.sitecoreContext}>
        <YourAppsComponentsHere />
      </SitecoreContext>
    )
  }
}

withSitecoreContext()HOCを使用する最後の部分は、Sitecoreコンテキストが変更されたときにprops.sitecoreContextプロパティのデータが更新されるようにすることです。ネストされたコンポーネント内のprops.updateSitecoreContextおよび更新props.sitecoreContextにアクセスするには、コンポーネントをwithSitecoreContext({ updatable: true })でラップできます。これは、アプリでルートが変更されたとき、またはサーバー側のレンダリングがステート オブジェクトを渡すとき (新しいレイアウト データがSitecoreから取得されてレンダリングされるとき) です。例えば：

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

class RouteHandler extends React.Component {
  getContext = () => this.props.sitecoreContext

  async updateRouteData() {
    const routeData = await getRouteData("/"); // makes a request for new route data, for example

    this.props.updateSitecoreContext(routeData.sitecore.context);
  }
}

export default withSitecoreContext({ updatable: true })(RouteHandler)
メモ

グローバル変数ssrInitialStateを格納して、アプリケーション全体で使用することはお勧めしません。代わりに、ssrInitialStateをAppRootに渡し、必要なすべてのデータをSitecoreContext内に格納し、withSitecoreContext()を使用してアクセスする必要があります。

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