次の方法で共有


モジュール反応コンポーネント ファイル

この記事では、Microsoft Dynamics 365 Commerce のモジュール React コンポーネント ファイルに関する情報を提供します 。

モジュール React コンポーネント ファイルは、ビジネス ロジックを含み、モジュールの表示を制御する TypeScript (.ts) ファイルです。 反応 render() メソッドは、モジュールの HTML を生成します。

モジュールの既定のテンプレートは、React コンポーネントを分割し、2 つのファイル、モジュール反応コンポーネント (MODULE_NAME.tsx) とモジュール ビュー ファイル (MODULE_NAME.view.tsx) に分割されます。 通常、ビジネス ロジックは React コンポーネント ファイルで実行され、ビューに必要なデータは props オブジェクトを使用してビューに渡されます。 2 つのファイルに影響を受ける場合、モジュールの表示より優先される表示拡張機能ファイルを提供できます。 これにより、選択したテーマに基づいてモジュールの表示を柔軟に変更できます。

次の例では、新しいモジュールの既定 React コンポーネント ファイルを示します。

import * as React from 'react';

import { IProductFeatureData } from './product-feature.data';
import { IProductFeatureProps } from './product-feature.props.autogenerated';

export interface IProductFeatureViewProps extends IProductFeatureProps<IProductFeatureData> {

}

/**
 *
 * ProductFeature component
 * @extends {React.PureComponent<IProductFeatureProps<IProductFeatureData>>}
 */
class ProductFeature extends React.PureComponent<IProductFeatureProps<IProductFeatureData>> {
    public render(): JSX.Element | null {

        return this.props.renderView(this.props);
    }
}

export default ProductFeature;

モジュール定義ファイル (MODULE_NAME.definition.) およびデータ プロパティ ファイル (MODULE_NAME.data.ts) に定義されているコンフィギュレーション プロパティには、this.props.config.*this.props.data.* アプリケーション プログラミング インターフェイス (API) プロパティを使用してアクセスできます。

追加リソース

モジュールの概要

モジュール定義ファイル

モジュール ビュー ファイル

モジュール データ ファイル

モジュール モック ファイル

モジュール テスト ファイル

モジュール props.autogenerated.ts ファイル