1. React NativeのSitecore JavaScriptレンダリングSDK (JSS)

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

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

このページの翻訳は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が提供するレイアウト/ルート データ。

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

レンダリング プロップAPI

JSSは、高階コンポーネントよりもrender propsパターンをサポートします。<Placeholder>コンポーネントのrender propsを使用すると、高次コンポーネントと同じ方法でプレースホルダーコンテンツのレンダリングを引き継ぎ、動的propsを使用できます。

次の例は、components配列を取得し、render propsを使用してレンダリングする方法を示しています。

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コンポーネントを置き換えることでカスタマイズできます。

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