SPA中的复合组件

通过将多个基本组件组合到单个组件中,复合组件充分利用了AEM组件的模块化特性。 常用的复合组件用例是卡组件,由图像和文本组件的组合构成。

当在AEM单页应用程序(SPA)编辑器框架中正确实现复合组件时,内容作者可以像拖放任何其他组件一样拖放这些组件,但仍然能够单独编辑组成复合组件的每个组件。

本文演示如何向单页应用程序添加复合组件以与AEM SPA Editor无缝协作。

用例

本文将以典型卡组件为例进行说明。 卡是许多数字体验的常用UI元素,通常由图像和关联文本或题注组成。 作者希望能够拖放整张卡,但能够单独编辑卡的图像并自定义相关文本。

前提条件

支持复合组件用例的以下模型需要以下先决条件。

  • 您的AEM开发实例正在带有示例项目的端口4502上本地运行。
  • 在AEM中启用了可编辑的正常外部React应用程序
  • React应用程序使用RemotePage组件加载到AEM编辑器中。

将复合组件添加到SPA

根据AEM中的SPA实施,有三种不同的实现组件模型。

以下部分以卡组件为例说明了如何实现每种情况。

您的AEM项目中不存在该组件。

开始,方法是创建将构成复合组件的组件,即图像及其文本的组件。

  1. 在您的AEM项目中创建文本组件。

  2. 在组件的editConfig节点中,从项目添加相应的resourceType

     resourceType: 'wknd-spa/components/text' 
    
  3. 使用withMappable帮助程序可启用组件编辑。

    export const AEMText = withMappable(Text, TextEditConfig); 
    

文本组件将类似于以下内容。

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项目中,但其必需内容不存在。

在这种情况下,卡组件已在包含标题和图像节点的AEM项目中创建。 子节点(文本和图像)具有相应的资源类型。

卡组件的节点结构

然后,您可以将其添加到SPA并检索其内容。

  1. 在SPA中为此创建相应组件。 确保将子组件映射到SPA项目中相应的AEM资源类型。 在此示例中,我们使用与上例中详细的相同的AEMTextAEMImage组件。

    import React from 'react';
    import { Container, withMappable, MapTo } from '@adobe/aem-react-editable-components';
    import { Text, TextEditConfig } from './AEMText';
    import Image, { ImageEditConfig } from './AEMImage';
    
    export const AEMCard = withMappable(Container, {
      resourceType: 'wknd-spa/components/imagecard'
    });
    
    MapTo('wknd-spa/components/text')(Text, TextEditConfig);
    MapTo('wknd-spa/components/image')(Image, ImageEditConfig);
    
  2. 由于imagecard组件没有内容,因此请将卡添加到页面。 在SPA中包含AEM的现有容器。

    • 如果AEM项目中已有容器,则我们可以将此组件包含在SPA中,然后从AEM将组件添加到容器。
    • 确保将卡组件映射到SPA中的相应资源类型。
    <ResponsiveGrid
     pagePath='/content/wknd-spa/home'
     itemPath='root/responsivegrid' />
    
  3. 将创建的wknd-spa/components/imagecard组件添加到页面模板中容器组件的允许组件。

现在,可以在AEM编辑器中将imagecard组件直接添加到容器。

在编辑器中合成卡

组件及其必需内容都存在于您的AEM项目中。

如果内容存在于AEM中,则可以通过提供内容的路径直接将其包含在SPA中。

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

节点结构中的复合路径

AEMCard组件与上一个用例中定义的相同。 在此,AEM项目中上述位置中定义的内容将包含在SPA中。

On this page

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now