Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
This article describes the module React component file in Microsoft Dynamics 365 Commerce.
The module React component file is a TypeScript (.ts) file that contains business logic and controls a module's view. The React render() method generates the module's HTML.
The default template of a module breaks up the React component and view into two files: the module React component (MODULE_NAME.tsx) and the module view file (MODULE_NAME.view.tsx). Generally, the React component file performs business logic and passes any data needed by the view into the view by using the props object. Themes separate the React component and view into two files to provide a view extension file that overrides the view for a module. This separation provides greater flexibility in changing a module's view based on the selected theme.
Example
The following example shows the default React component file for a new module.
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;
You can access configuration properties that you define in the module definition file (MODULE_NAME.definition.json) and data properties file (MODULE_NAME.data.ts) in the module view file by using the this.props.config.* and this.props.data.* application programming interface (API) properties.