Reactコンポーネントユーティリティーリファレンス

Reactを使用してLiferay DXPで高性能コンポーネントとアプリケーションを構築するのに役立ついくつかの便利なツールが利用可能です。

• frontend-js-react-webモジュール
• Reactコンポーネントタグ

frontend-js-react-webモジュール

frontend-js-react-web共有モジュールは、Liferay DXP全体でReactのすべてのコンシューマで使用できるReactの単一の共通バージョンを提供します。 このモジュールには、Liferay DXPのコンテキストでReactコンポーネントをマウント（つまりレンダリング）する標準的な方法が含まれており、対応するポートレットが破棄されたときにコンポーネントをアンマウント（クリーンに破棄）する場合などの詳細に対応しています。 例を以下に示します。

import {render} from 'frontend-js-react-web';
render(
renderable,
renderData,
container
);

次のパラメーターは必須です。

renderable: レンダリングするために1を返すReact要素または関数

renderData: プロップとしてレンダリング可能なコンポーネントに渡すデータ

container: コンポーネントがマウントされるDOMノード（例： document.getElementById(placeholderId).parentElement）

共通フック

frontend-js-react-webモジュールには、コードを複製することなく、コンポーネントに便利な動作を取り入れるために使用できる一連の共通フックも含まれています。

usePrevious フック は現在の値と以前の値 (状態、プロパティ、または任意の値) を比較するために使用できます。

useIsMountedフックは、コンポーネントがまだマウントされているかどうかを判別するために使用できます。 例を以下に示します。

import {useIsMounted} from 'frontend-js-react-web';

const InlineConfirm = props => {
    const isMounted = useIsMounted();

    const _handleConfirmButtonClick = () => {
        props.onConfirmButtonClick().then(() => {
            if (isMounted()) {
                setPerformingAction(false);
            }
        });
    };

    return <button onClick={handleConfirmButtonClick} />;

};

useEventListenerフックは、マウント時にイベントリスナーを追加し、アンマウント時にそれを削除するために使用できます。 以下に例を示します。

import {useEventListener} from 'frontend-js-react-web';

function OverlayContainer({root, allowEdit}) {
    useEventListener('keydown', handleKeydown, true, document);
    useEventListener('click', handleClick, false, document);

    return <></>;
}

Reactコンポーネントタグ

<react:component> タグは、React ビューを JSP に追加します。 例を以下に示します。

<react:component
    data="<%= data %>"
    module="js/pages/form-view/EditFormViewApp.es"
/>

これは、上記に示すfrontend-js-react-webモジュールのrender()関数をラップしています。 ここで渡される データ は renderData として渡され、 モジュール は レンダリング可能 (上記 のコンポーネント関数または React 要素) をエクスポートする必要があります。