JSS ReactサンプルアプリのUIコンポーネント

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

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

ReactのSitecore JavaScriptレンダリングSDK (JSS) を使用して構築されたアプリケーション内のUIコンポーネントは、fieldsプロパティを提供するPlaceholderコンポーネント内に動的に追加される点を除き、他のReactコンポーネントと変わりません。例えば:

以下は、JSSアプリケーションでのReactコンポーネント定義の例です。

RequestResponse
import React from 'react';
import { Text } from '@sitecore-jss/sitecore-jss-react';

const Welcome = ({ fields }) => (
  <View>
    <Text field={fields.title} />
  </View>
);

export default Welcome;

Welcomeコンポーネントは、内部コンポーネントの状態やライフサイクルメソッドの必要性がないため、ステートレスな関数型コンポーネントとして記述されていますが、ES6クラス構文を使用してReact.Component.JSSは、通常のReact規約の使用に制限を設けていません。

Sitecoreフィールド タイプの処理

JSS for Reactは、Sitecoreフィールド タイプを処理するためのヘルパー コンポーネントを提供します。ヘルパー コンポーネントは、Sitecoreフィールド値をレンダリングし、高度なSitecoreエディターでフィールド編集を可能にする特別なコンポーネントです。

ReactのJSSには 、テキスト、画像、日付、リッチテキストなどのフィールドタイプを表示するためのコンポーネントが含まれています。

先端

利用可能なすべてのコンポーネントのライブ例については、JSS Reactサンプルアプリケーションのスタイルガイドページを参照してください。

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

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