ハイライト
日本語翻訳に関する免責事項
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Search APIによって提供される強調表示されたテキストを表示するヘルパー。 Highlightは、クエリ フックによって要求された情報でSDK返されたフィールドの一部に強調表示区切り記号が使用されている場合は、使用します。
APIリファレンス
|
名前 |
種類 |
形容 |
|---|---|---|
|
test |
糸 |
区切り記号を持つテキスト |
|
pre |
糸 |
プリ区切り記号 |
|
post |
糸 |
ポスト区切り記号 |
|
element |
糸 |
デフォルト strong コンテンツを区切り文字で囲むために使用されるタグ。 |
例
次のコード ブロックでは、クエリ フックを使用したHighlightユーティリティの使用について説明します。
RequestResponse
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が使用されます。
RequestResponse
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'}
/>
</>);