---
title: "Reactコンポーネント内でSitecoreコンテキストデータにアクセスする方法"
slug: "accessing-the-sitecore-context-data-in-a-react-component"
abstract: "高次コンポーネントwithSitecoreContextを使ってコンポーネント内のSitecore Contextデータにアクセスする"
---
# Reactコンポーネント内でSitecoreコンテキストデータにアクセスする方法

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

コンテキストデータが必要な一般的な例としては、ルートレベルに保存されたページタイトルやメタキーワードフィールドにアクセスするため、または高度な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()を使ってアクセスする必要があります。