1. 例

サブスクライブ・イベントの使用

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

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

次のReactの例では、EntitySavedイベントをサブスクライブしています。イベントが発生すると、Content Hubコードはこのイベントをグローバルにディスパッチし、エンティティ プロパティ情報、構成で渡されたデータ、およびマテリアルUIテーマの色によるスタイルを表示します。

先端

この例のチュートリアルは、Discover SitecoreチャネルのSitecore Content Hub - 外部コンポーネント ビデオでご覧いただけます。

import ReactDOM from "react-dom";
import React from "react";

const OptionsContext = React.createContext<any>(null);

const onEntitySaved = (evt: Event): void => {
    const { definitionName, id } = (evt as CustomEvent<{ definitionName: string; id: number }>).detail;

    alert(`Entity with id ${id} and definition ${definitionName} was saved`);
};

window.addEventListener("ENTITY_SAVED", onEntitySaved);

export default function createExternalRoot(container: HTMLElement) {
    return {
        render(context: any) {
            ReactDOM.render(
                <OptionsContext.Provider value={context.options}>
                    <OptionsContext.Consumer>
                        {options => {
                            return (
                                <>
                                    {/* We use a color from the theme and the entity id from the options */}
                                    <h2 style={{ color: context.theme.palette.primary.main }}>
                                        the entity id is, {options.entityId}!
                                    </h2>
                                    {/* We show a property from the config object */}
                                    <p>
                                        The following is information from the config object:
                                        {context.config.propFromConfig}
                                    </p>
                                    <p style={{ color: "var(--color-cyan, 'red')" }}>
                                        The following text is styled in the cyan color based on the --color-cyan CSS
                                        variable with red as a fallback
                                    </p>
                                </>
                            );
                        }}
                    </OptionsContext.Consumer>
                </OptionsContext.Provider>,
                container
            );
        },
        unmount() {
            window.removeEventListener("ENTITY_SAVED", onEntitySaved);
            ReactDOM.unmountComponentAtNode(container);
        },
    };
}

この例では、returnステートメントは3つのHTML要素を生成します。1つ目は、テーマに従ってスタイル設定された特定の値を示す見出しです。

<h2 style={{ color: context.theme.palette.primary.main }}>
    the entity id is, {options.entityId}!
</h2>

2番目の要素は、JSON設定オブジェクトによって渡される値を記述する段落です。

<p>
    The following is information from the config object:
    {context.config.propFromConfig}
</p>

3番目の要素は、プレーンテキストを含む段落で、CSS変数を使用してスタイル設定されます。

<p style={{ color: "var(--color-cyan, 'red')" }}>
    The following text is styled in the cyan color based on the --color-cyan CSS
    variable
</p>
この記事を改善するための提案がある場合は、 お知らせください!