ハイライト

日本語翻訳に関する免責事項

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

Search APIによって提供される強調表示されたテキストを表示するヘルパー。 Highlightは、クエリフックによって要求された情報でSDK返されたフィールドの一部に強調表示区切り記号が使用されている場合は、使用します。

APIリファレンス

名前	種類	形容
test	糸	区切り記号を持つテキスト
pre	糸	プリ区切り記号
post	糸	ポスト区切り記号
element	糸	デフォルト strong コンテンツを区切り文字で囲むために使用されるタグ。

例

次のコードブロックでは、クエリフックを使用したHighlightユーティリティの使用について説明します。

const {
    actions: {
      // actions to gather from hook
    },
    state: {
      // state of the hook
    },
    queryResult: {
      isLoading,
      isFetching,
      data: {
        // other data fields to gather
        content: articles = []
      } = {},
    },
  } = useSearchResults<MyModel, MyInitialState>({
    query: (query) => {
      query
        .getRequest()
        .setSearchQueryHighlightFragmentSize(500)
        .setSearchQueryHighlightFields(['subtitle', 'description'])
        .setSearchQueryHighlightPreTag('[open delimiter]')
        .setSearchQueryHighlightPostTag('[closing delimiter]');
    },
    state: {
      // Initial state
    },
  });

次に、情報をレンダリングするときに、次のコードブロックのようにHighlightが使用されます。

artciles.map(({subtitle, description}) =>
    <>
      <Highlight
        text={subtitle}
        pre={'[open delimiter]'}
        post={'[closing delimiter]'}
        element={'strong'}
      />
      <Highlight
        text={description}
        pre={'[open delimiter]'}
        post={'[closing delimiter]'}
        element={'strong'}
      />
    </>);

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