useRecommendation
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
recommendation query hookを使って、recommendationウィジェットのデータをリクエスト・取得してください。
ジェネリック応答
{ widgetRef, actions: { onItemClick }, state: { page }, queryResult: { isLoading, isFetching, data: { content: articles = } = {} }, }
輸入
import { useRecommendation } from '@sitecore-search/react';
例
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
) => query, state: { itemsPerPage: itemsToDisplay, }, });const loading = isLoading || isFetching;
return (
const RecommendationBasicHorizontalStyledWidget = widget(RecommendationComponent, WidgetDataType.RECOMMENDATION, 'content'); export default RecommendationBasicHorizontalStyledWidget;
!注ページに追加する前に、UIコンポーネントをウィジェットコンポーネントに変換してください。
コンポーネントをウィジェットコンポーネントに変換するには、UIコンポーネントをwidgetまたはsetWidget関数に渡します。
!注注意事項これらのReactリソースは、あなたの実装に役立ちます:
ウィジェットの動作例を見るには、Search JS SDKとUIコンポーネントパッケージを使って作成された スターターキットのウェブサイト をご覧ください。
GitHubリポジトリをダウンロードまたはフォークできます。