use推奨事項
日本語翻訳に関する免責事項
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
recommendationクエリ フックを使用して、recommendationウィジェットのデータを要求および取得します。
一般的な応答
RequestResponse
{
widgetRef,
actions: { onItemClick },
state: { page },
queryResult: { isLoading, isFetching, data: { content: articles = [] } = {} },
}輸入
RequestResponse
import { useRecommendation } from '@sitecore-search/react';例
RequestResponse
import type { RecommendationInitialState, RecommendationWidgetQuery } from '@sitecore-search/react';
import { WidgetDataType, useRecommendation, widget } from '@sitecore-search/react';
type ArticleModel = {
id: string;
name: string;
author?: string;
url?: string;
image_url?: string;
source_id?: string;
};
type RecommendationProps = {
title?: string;
itemsToDisplay?: number;
};
type InitialState = RecommendationInitialState<'itemsPerPage'>;
const DEFAULT_IMG_URL = 'https://placehold.co/500x300?text=No%20Image'; // TODO: Update with corresponding fallback image
export const RecommendationComponent = ({ title = '', itemsToDisplay = 6 }: RecommendationProps) => {
const {
widgetRef,
actions: { onItemClick },
queryResult: { isLoading, isFetching, data: { content: articles = [] } = {} },
} = useRecommendation<ArticleModel, InitialState>({
query: (query:RecommendationWidgetQuery) => query,
state: {
itemsPerPage: itemsToDisplay,
},
});
const loading = isLoading || isFetching;
return ( <div ref={widgetRef}> ... </div> );
};
const RecommendationBasicHorizontalStyledWidget = widget(RecommendationComponent, WidgetDataType.RECOMMENDATION, 'content');
export default RecommendationBasicHorizontalStyledWidget;メモ
UIコンポーネントをウィジェット コンポーネントに変換してから、ページに追加します。
コンポーネントをウィジェットコンポーネントに変換するには、UIコンポーネントをwidget関数またはsetWidget関数に渡します。