將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來決定要呈現的內容是RTF文字還是純文字。 實際使用的「內容」來自this.props.text。

為避免潛在的XSS攻擊，在使用danguallySetInnerHTML轉譯內容之前，RTF會透過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 Editor實作的動態性質，我們必須明確參考任何繫結至AEM可編寫元件的SPA元件。 這可讓AEM作者選擇在應用程式中隨處使用元件。

下列匯入陳述式包含寫入專案中的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 Core元件，並用於目前專案。 然後使用MapTo將這些元件對應至專案特定的AEM元件，就像之前的Text元件範例一樣。

從AEM開始畫面導覽至​ 工具 > 範本 > WKND SPA React。

選取並開啟​ SPA頁面 ​範本以進行編輯。

選取​ 配置容器，然後按一下它的​ 原則 ​圖示以編輯原則：

在​ 允許的元件 > 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元件的回應式功能和更新的RTF原則來編寫如下的檢視：

在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>

這是擴充及實作您自己的元件的絕佳簡介。