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

Version: 22.x

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

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

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

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

RequestResponse

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コンポーネントにラップする必要があります。たとえば、アプリケーションのルートコンポーネントで、次のようになります。

RequestResponse

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から取得されてレンダリングされるとき) です。例えば：

RequestResponse

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()を使用してアクセスする必要があります。

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

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

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

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