useContentBlock
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
コンテンツブロッククエリフックを使って、コンテンツブロックをレンダリングするために必要な外観情報やデータを取得してください。
Requestパラメータ
コンテンツブロックのクエリフックにはパラメータがありません。
ジェネリック応答
{ rfkId, // the widget ID is added here. actions: { }, state: { // Here we destructure the context variables that we would like to obtain. }, queryResult: { isLoading, // The query has no data and is currently fetching isError,// The query encountered an error isSuccess, // The query was successful and data is available isFetching, // In any state, if the query is fetching at any time (including background refetching) isFetching will be true. data: { appearance: { css_names: string, html_names: string, variables: { variableName: string: { valueType : string required : boolean expanded : boolean value : string | number } }, templates: { html:{ devices: { pc: { content: string }, // optional tablet: { content: string }, // optional mobile: { content: string } } }, css: { devices: { pc: { content: string }, // optional tablet: { content: string }, // optional mobile: { content: string } } } } } } = {}, }, }
輸入
import { useContentBlock } from '@sitecore-discover/react';
例
import { useContentBlock, useWidgetVisibility, widget, WidgetDataType, } from "@sitecore-discover/react"; import { createElement, useLayoutEffect, useRef } from "react";
function addStyle(rfkId, node, css) { let styleNode = document.querySelector(`data-rfk-id-style=${rfkId}`); if (!styleNode) { styleNode = document.createElement("style"); styleNode.setAttribute("type", "text/css"); styleNode.dataset.rfkIdStyle = rfkId; node.parentNode?.appendChild(styleNode); } styleNode.innerHTML = css; }
const ContentBlockWidget = () => { const { rfkId, queryResult: { data: { appearance: { css_names: cssNames = , templates: { html: { devices: { pc: { content: htmlContent = null } = {} } = {}, } = {}, css: { devices: { pc: { content: cssContent = null } = {} } = {}, } = {}, } = {}, } = {}, } = {}, }, } = useContentBlock(); const { ref } = useWidgetVisibility(); const contentRef = useRef(null);
// sets widget styles useLayoutEffect(() => { if (contentRef.current && cssContent) { addStyle(rfkId, contentRef.current, cssContent); } }, rfkId, cssContent);
// sets widget content useLayoutEffect(() => { if (contentRef.current && htmlContent) { contentRef.current.innerHTML = htmlContent; } }, htmlContent); return createElement( "div", { ref, "data-rfkid": rfkId, className: cssNames.join(" ") }, createElement("div", { ref: contentRef }) ); };
export default widget(ContentBlockWidget, WidgetDataType.CONTENT_BLOCK);
!注ページに追加する前に、UIコンポーネントをウィジェットコンポーネントに変換してください。
コンポーネントをウィジェットコンポーネントに変換するには、UIコンポーネントをwidgetまたはsetWidget関数に渡します。