将SPA组件映射到AEM组件 map-components

在跳转到SPA代码之前，请务必了解AEM提供的JSON模型。 导航到核心组件库并查看文本组件的页面。 核心组件库提供了所有AEM核心组件的示例。

为以下示例之一选择​ JSON ​选项卡：

您应该看到三个属性：text、richText和:type。

:type是一个保留属性，它列出了AEM组件的sling:resourceType（或路径）。 :type的值用于将AEM组件映射到SPA组件。

text和richText是对SPA组件公开的其他属性。

在http://localhost:4502/content/wknd-spa-react/us/en.model.json处查看JSON输出。 您应该能够找到类似于以下内容的条目：

"text": {
    "id": "text-a647cec03a",
    "text": "<p>Hello World! Updated content!</p>\r\n",
    "richText": true,
    ":type": "wknd-spa-react/components/text",
    "dataLayer": {}
   }

在您选择的IDE中，打开SPA的AEM项目。 展开ui.frontend模块并在ui.frontend/src/components/Text/Text.js下打开文件Text.js。

我们将检查的第一个区域是位于~第40行的class Text：

class Text extends Component {

    get richTextContent() {
        return (<div
                id={extractModelId(this.props.cqPath)}
                data-rte-editelement
                dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(this.props.text)}} />
                );
    }

    get textContent() {
        return <div>{this.props.text}</div>;
    }

    render() {
        return this.props.richText ? this.richTextContent : this.textContent;
    }
}

Text是标准React组件。 组件使用this.props.richText来确定要呈现的内容是富文本还是纯文本。 实际使用的“内容”来自this.props.text。

为避免潜在的XSS攻击，富文本在使用dangullySetInnerHTML呈现内容之前通过DOMPurify进行转义。 在练习的前面从JSON模型中撤回richText和text属性。

接下来，打开ui.frontend/src/components/import-components.js查看~第86行上的TextEditConfig：

const TextEditConfig = {
emptyLabel: 'Text',

    isEmpty: function(props) {
        return !props || !props.text || props.text.trim().length < 1;
    }
};

上述代码负责确定何时在AEM创作环境中呈现占位符。 如果isEmpty方法返回​ true，则会呈现占位符。

最后，查看第94行以下位置的MapTo调用：

export default MapTo('wknd-spa-react/components/text')(LazyTextComponent, TextEditConfig);

MapTo由AEM SPA编辑器JS SDK (@adobe/aem-react-editable-components)提供。 路径wknd-spa-react/components/text表示AEM组件的sling:resourceType。 此路径与之前观察到的JSON模型公开的:type匹配。 MapTo负责解析JSON模型响应并将正确的值作为props传递给SPA组件。

您可以在ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/components/text找到AEM Text组件定义。

在项目代码中，打开位于ui.frontend/src/components的文件import-components.js。
此文件会导入映射到SPA组件的所有AEM组件。 考虑到SPA编辑器实施的动态性质，我们必须显式引用任何与SPA可创作组件绑定的AEM组件。 这允许AEM作者选择在应用程序中随处使用组件。

以下import语句包含在项目中编写的SPA组件：

import './Page/Page';
import './Text/Text';
import './Container/Container';
import './ExperienceFragment/ExperienceFragment';

存在来自@adobe/aem-core-components-react-spa和@adobe/aem-core-components-react-base的其他imports。 这些调用将导入React核心组件，并在当前项目中使其可用。 然后使用MapTo将这些组件映射到项目特定的AEM组件，就像前面的Text组件示例一样。

从AEM开始屏幕导航到​ 工具 > 模板 > WKND SPA React。

选择并打开​ SPA Page ​模板以进行编辑。

选择​ 布局容器 ​并单击它的​ 策略 ​图标以编辑策略：

在​ 允许的组件 > WKND SPA React - Content >检查​ 图像、Teaser ​和​ 标题 ​下。

在​ 默认组件 > 添加映射 ​下，并选择​ 图像 — WKND SPA React - Content ​组件：

输入image/*的​ MIME类型。

单击​ 完成 ​以保存策略更新。

在​ 布局容器 ​中，单击​ 文本 ​组件的​ 策略 ​图标。

创建名为​ WKND SPA Text ​的新策略。 在​ 插件 > 格式 >下，选中所有框以启用其他格式选项：

在​ 插件 > 段落样式 >下，选中​ 启用段落样式 ​的框：

单击​ 完成 ​以保存策略更新。

导航到​ 主页 http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html。

您现在应该能够在页面上使用其他组件​ Image、Teaser ​和​ Title。

您还应该能够编辑Text组件并在​ 全屏 ​模式下添加其他段落样式。

您还应该能够从​ 资产查找器 ​中拖放图像：

使用​ Title ​和​ Teaser ​组件进行试验。

通过AEM Assets添加您自己的映像，或者为标准WKND引用站点安装完成的代码库。 WKND引用站点包含可在WKND SPA上重复使用的许多图像。 可以使用AEM包管理器安装包。

在浏览器中导航到http://localhost:4502/content/wknd-spa-react/us/en.model.json

布局容器 ​组件具有wcm/foundation/components/responsivegrid的sling:resourceType，并且被SPA编辑器使用:type属性识别，就像Text和Image组件一样。

SPA编辑器中提供了使用布局模式重新调整组件大小的相同功能。

返回到http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html。 添加其他​ 图像 ​组件，然后尝试使用​ 布局 ​选项重新调整其大小：

重新打开JSON模型http://localhost:4502/content/wknd-spa-react/us/en.model.json并观察作为JSON一部分的columnClassNames：

类名aem-GridColumn--default--4指示组件应基于12列网格为4列宽。 有关响应式网格的更多详细信息见此处。

返回到IDE，在ui.apps模块中ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/clientlibs/clientlib-grid处定义了客户端库。 打开文件less/grid.less。

此文件确定​ 布局容器 ​使用的断点（default、tablet和phone）。 此文件将根据项目规范进行自定义。 当前断点设置为1200px和768px。

您应该能够使用Text组件的响应式功能和更新的富文本策略来创作类似于以下内容的视图：

在Visual Studio Code IDE中，确保已通过Marketplace扩展安装​ VSCode AEM Sync：

在项目资源管理器中展开​ ui.content ​模块并导航到/conf/wknd-spa-react/settings/wcm/templates。

右键单击 templates文件夹并选择​ 从AEM服务器导入：

重复导入内容的步骤，但选择位于/conf/wknd-spa-react/settings/wcm/templates/policies的​ 策略 ​文件夹。

Inspect位于ui.content/src/main/content/META-INF/vault/filter.xml的filter.xml文件。

<!--ui.content filter.xml-->
<?xml version="1.0" encoding="UTF-8"?>
 <workspaceFilter version="1.0">
     <filter root="/conf/wknd-spa-react" mode="merge"/>
     <filter root="/content/wknd-spa-react" mode="merge"/>
     <filter root="/content/dam/wknd-spa-react" mode="merge"/>
     <filter root="/content/experience-fragments/wknd-spa-react" mode="merge"/>
 </workspaceFilter>

filter.xml文件负责识别与包一起安装的节点的路径。 请注意每个筛选器上的mode="merge"，这表示现有内容将不会被修改，而是只会添加新内容。 由于内容作者可能正在更新这些路径，因此代码部署​ 不 ​覆盖内容非常重要。 有关使用筛选器元素的更多详细信息，请参阅FileVault文档。

比较ui.content/src/main/content/META-INF/vault/filter.xml和ui.apps/src/main/content/META-INF/vault/filter.xml以了解每个模块管理的不同节点。

导航到核心组件库🔗中的图像示例。

src、alt和title的属性用于填充SPA Image组件。

接下来，在ui.frontend/src/components下创建一个名为Image的新文件夹。

在Image文件夹下创建名为Image.js的新文件。

将以下import语句添加到Image.js：

import React, {Component} from 'react';
import {MapTo} from '@adobe/aem-react-editable-components';

然后添加ImageEditConfig以确定何时在AEM中显示占位符：

export const ImageEditConfig = {

    emptyLabel: 'Image',

    isEmpty: function(props) {
        return !props || !props.src || props.src.trim().length < 1;
    }
};

如果未设置src属性，将显示占位符。

接下来实施Image类：

 export default class Image extends Component {

    get content() {
        return <img     className="Image-src"
                        src={this.props.src}
                        alt={this.props.alt}
                        title={this.props.title ? this.props.title : this.props.alt} />;
    }

    render() {
        if(ImageEditConfig.isEmpty(this.props)) {
            return null;
        }

        return (
                <div className="Image">
                    {this.content}
                </div>
        );
    }
}

上述代码将根据JSON模型传入的prop src、alt和title呈现<img>。

添加MapTo代码以将React组件映射到AEM组件：

MapTo('wknd-spa-react/components/image')(Image, ImageEditConfig);

请注意，字符串wknd-spa-react/components/image对应于ui.apps中AEM组件的位置： ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/components/image。

在同一目录中创建一个名为Image.css的新文件并添加以下内容：

.Image-src {
    margin: 1rem 0;
    width: 100%;
    border: 0;
}

在Image.js中，在import语句下方的顶部添加对文件的引用：

import React, {Component} from 'react';
import {MapTo} from '@adobe/aem-react-editable-components';

require('./Image.css');

打开文件ui.frontend/src/components/import-components.js并添加对新Image组件的引用：

import './Page/Page';
import './Text/Text';
import './Container/Container';
import './ExperienceFragment/ExperienceFragment';
import './Image/Image'; //add reference to Image component

在import-components.js中注释掉React核心组件图像：

//MapTo('wknd-spa-react/components/image')(ImageV2, {isEmpty: ImageV2IsEmptyFn});

这将确保改用我们的自定义图像组件。

使用Maven将SPA代码从项目的根部署到AEM：

$ cd aem-guides-wknd-spa.react
$ mvn clean install -PautoInstallSinglePackage

在AEM中Inspect SPA。 页面上的任何图像组件都应继续工作。 在渲染的输出中Inspect，您应该会看到自定义图像组件（而不是React核心组件）的标记。

自定义图像组件标记

<div class="Image">
    <img class="Image-src" src="/content/image-src.jpg">
</div>

React核心组件图像标记

<div class="cmp-image cq-dd-image">
    <img src="/content/image-src.jpg" class="cmp-image__image">
</div>

这是扩展和实施您自己的组件的良好介绍。