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

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

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

プレースホルダーは、JSS で構築されたすべてのアプリケーションに欠かせないコンポーネントです。

React Native JSS アプリケーションでプレースホルダーを使用するためのオプションがいくつかあります。

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

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

RequestResponse
import React from 'react'
import { View, Text } from 'react-native'
import { Placeholder } from '@sitecore-jss/sitecore-jss-react-native';

const App = ({ rendering }) => (
  <View>
    <Text>My App</Text>
    <Placeholder name="jss-main" rendering={rendering} />
  </View>
);

Placeholder コンポーネントには、次のプロパティがあります。

  • name プロパティ: 公開するプレースホルダーのキーとして機能します。

  • rendering プロパティ: 次を表します。

    • Sitecoreで提供された現在のレイアウト/ルート データ。

    • 別のコンポーネント内からプレースホルダーを公開する場合は、親コンポーネントのデータ。

Render Props API

高次コンポーネントを使用しない場合、JSS はレンダー プロップ パターンをサポートします。<Placeholder> コンポーネントの render プロップを使うと、高次コンポーネントと同じ方法でプレースホルダーのコンテンツのレンダリングを引き継ぎ、動的プロップを使用することができます。

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

RequestResponse
import React from 'react';
import { View, Text } from 'react-native'
import { Placeholder } from '@sitecore-jss/sitecore-jss-react-native';

const App = ({ rendering }) => (
  <View>
    <Text>My App</Text>
    <Placeholder name="jss-main" rendering={rendering} render={(components, placeholderData, props) => <View>{components}</View>} />
  </View>
);

プレースホルダーの render 関数には、次の 2 つのオプションの引数を使用できます。

  • props パラメーターは、<Placeholder> に渡されるプロパティを反映しています。

  • placeholderData パラメーターは、現在のプレースホルダーのレイアウト データを提供します。

存在していないコンポーネントの処理

componentFactory で認識されないレンダリング名がプレースホルダーに含まれている場合 (たとえば、バックエンド開発者が Foo レンダリングを作成し、それをページに追加したが、Foo.js ファイルがまだ存在していない場合)、レンダリングは、React Native コンポーネントの missingComponentComponent プロパティで定義された MissingComponent コンポーネントに置き換えられます。既定の実装はシンプルなメッセージですが、missingComponentComponent プロパティを独自の React-Native コンポーネントに置き換えることで、この実装をカスタマイズできます。

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

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