カスタムコンポーネントがPage Builderのスタイル変更に即座に反応できるようにします
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
ページビルダーエディターモードでは、ユーザーが右側のスタイリングパネルでコンポーネントのスタイルを変更すると、キャンバス上でスタイル変更を見るためにページを読み込み直す必要があり、これが混乱を引き起こすことがあります。
これを避けるために、以下を含むイベントにサブスクライブを作ることができます。
- instanceId - キャンバス上の構成インスタンスを識別します。
- cssClasses - 更新されたCSSクラス文字列。
コンポーネントがイベントにサブスクライブされるためには、以下のコードを追加してください:
import { useEffect, useState } from 'react';
function useEventDrivenStyles(id: string, initialStyles: string): string { const eventStyles, setEventStyles = useState(initialStyles);
useEffect(() => { const handleStylesChanged = (event: Event) => { const { instanceId, cssClasses } = (event as CustomEvent).detail;
if (instanceId !== id) { return; }
setEventStyles(cssClasses ?? ''); };
window.addEventListener('sitecore
', handleStylesChanged);return () => { window.removeEventListener('sitecore
', handleStylesChanged); }; }, id);return eventStyles; }
解決策はイベント駆動型で、壊れず、コンポーネントごとにオプトインされます。スタイル駆動型のランタイム再計算が必要なコンポーネントは、キャンバス全体のリロードを強制することなく、サブスクライブやリアクションが可能です。プラットフォームが発信した正確なブラウザイベント名を使うsitecore
例えば:
const renderingInstanceId = props.rendering.uid; const eventStyles = useEventDrivenStyles(renderingInstanceId, props.params.styles); const marginTop = eventStyles.includes('container-color-background') ? 4 : 0;
return (