SPA 中的複合元件 composite-components-in-spas

複合元件可藉由將多個基本元件結合為單一元件，來使用AEM元件的模組化特性。 常見的複合元件使用案例是卡片元件，由影像和文字元件的組合所組成。

當在AEM單頁應用程式(SPA)編輯器架構中正確實作複合元件時，內容作者可以像拖放任何其他元件一樣拖放此類元件，但還是可以個別編輯組成複合元件的每個元件。

本文示範如何將複合元件新增至單頁應用程式，以便順暢地與AEM SPA編輯器搭配運作。

使用案例 use-case

本文將以典型卡片元件作為範例使用案例。 卡片是許多數位體驗的通用UI元素，通常由影像和相關文字或標題組成。 作者想要能夠拖放整個卡片，但可以個別編輯卡片的影像和自訂關聯文字。

先決條件 prerequisites

下列支援複合元件使用案例的模型需要下列先決條件。

將複合元件新增至SPA adding-composite-components

實作複合元件有三個不同的模型，視您在AEM中的SPA實作而定。

以下各節會以卡片元件為例，提供實施每個案例的範例。

您的AEM專案中不存在該元件。 component-does-not-exist

首先，建立構成複合元件的元件，也就是影像及其文字的元件。

文字元件將類似於以下內容。

import React from 'react';
import { withMappable } from '@adobe/aem-react-editable-components';

export const TextEditConfig = {
  emptyLabel: 'Text',
  isEmpty: function(props) {
    return !props || !props.text || props.text.trim().length < 1;
  },
  resourceType: 'wknd-spa/components/text'
};

export const Text = ({ cqPath, richText, text }) => {
  const richTextContent = () => (
    <div className="aem_text"
      id={cqPath.substr(cqPath.lastIndexOf('/') + 1)}
      data-rte-editelement
      dangerouslySetInnerHTML={{__html: text}} />
  );
  return richText ? richTextContent() : (
     <div className="aem_text">{text}</div>
  );
};

export const AEMText = withMappable(Text, TextEditConfig);

如果您以類似方式建立影像元件，可以將其與AEMText元件結合為新的卡片元件，並使用影像和文字元件作為子系。

import React from 'react';
import { AEMText } from './AEMText';
import { AEMImage } from './AEMImage';

export const AEMCard = ({ pagePath, itemPath}) => (
  <div>
    <AEMText
       pagePath={pagePath}
       itemPath={`text`} />
    <AEMImage
       pagePath={pagePath}
       itemPath={`image`} />
   </div>
);

如此產生的複合元件現在可置於應用程式中的任何位置，且將在SPA編輯器中為文字和影像元件新增預留位置。 在以下範例中，卡片元件會新增到標題下方的首頁元件。

function Home() {
  return (
    <div className="Home">
      <h2>Current Adventures</h2>
      <AEMCard
        pagePath='/content/wknd-spa/home' />
    </div>
  );
}

這會在編輯器中顯示文字和影像的空白預留位置。 使用編輯器輸入這些專案的值時，它們會儲存在指定的頁面路徑中，亦即/content/wknd-spa/home，位於根層級，且名稱在itemPath中指定。

編輯器中的

元件存在於您的AEM專案中，但其必要的內容不存在。 content-does-not-exist

在此案例中，卡片元件已在包含標題和影像節點的AEM專案中建立。 子節點（文字和影像）具有對應的資源型別。

卡片元件的

然後，您可以將其新增到您的SPA並擷取其內容。

現在可以直接將imagecard元件新增到AEM編輯器中的容器。

編輯器中的

元件及其必要內容都存在於您的AEM專案中。 both-exist

如果內容存在於AEM中，可提供內容的路徑直接包含在SPA中。

<AEMCard
    pagePath='/content/wknd-spa/home'
    itemPath='root/responsivegrid/imagecard' />

AEMCard元件與先前使用案例中定義的相同。在這裡，在AEM專案中上述位置定義的內容包含在SPA中。