JSS React Native サンプル アプリでのプレースホルダーの操作
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
プレースホルダーは、JSS で構築されたすべてのアプリケーションに欠かせないコンポーネントです。
React Native JSS アプリケーションでプレースホルダーを使用するためのオプションがいくつかあります。
プレースホルダーの基本的なテクニック
プレースホルダーをコンポーネントに追加する最も一般的な方法は、Placeholder
コンポーネントの使用です。
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
プロップを使うと、高次コンポーネントと同じ方法でプレースホルダーのコンテンツのレンダリングを引き継ぎ、動的プロップを使用することができます。
次の例は、レンダリング プロップを使用して、コンポーネント配列を取得し、レンダリングする方法を示しています。
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 コンポーネントに置き換えることで、この実装をカスタマイズできます。