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

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 }) => ( My App );

Placeholder成分は以下の性質を持ちます:

  • nameプロパティは、露出させるプレースホルダーの鍵として機能します。
  • 以下を表す rendering プロパティ:
    • 現在のSitecore提供のレイアウト/ルートデータ。
    • 他のコンポーネント内でプレースホルダーを公開する場合は、親コンポーネントデータを使います。

Render Props API

JSS高次コンポーネントよりもレンダープロップスパターンをサポートしています。コンポーネントのrenderプロップを使えば、高次コンポーネントと同様にプレースホルダーコンテンツのレンダリングを引き継ぎ、動的プロップを利用できます。

以下の例は、コンポーネント配列を取得し、render propsを使ってレンダリングする方法を示しています:

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

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

プレースホルダーのレンダリング関数に対して、オプションで2つの引数を使用できます:

  • propsパラメータは、に渡される性質のミラーです。
  • placeholderDataパラメータは現在のプレースホルダーのレイアウトデータを提供します。

欠損した部品の対処

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

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