---
title: "JSS React Nativeアプリでのプレースホルダーの作業"
slug: "working-with-placeholders-in-a-jss-react-native-app"
abstract: "React Native JSSアプリケーション向けのプレースホルダー技術"
---
# JSS React Nativeアプリでのプレースホルダーの作業

[プレースホルダーは](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/introducing-placeholders-in-jss-apps.html "Introducing placeholders in JSS apps") 、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プロップを使えば、高次コンポーネントと同様にプレースホルダーコンテンツのレンダリングを引き継ぎ、動的プロップを利用できます。

以下の例は、コンポーネント配列を取得し、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>
);

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

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

## 欠損した部品の対処

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