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>
  );
}

这将在编辑器中显示文本和图像的空占位符。 使用编辑器输入这些值的值时，它们存储在指定的页面路径中，即itemPath中指定的根级别的/content/wknd-spa/home。

编辑器中的

您的AEM项目中存在该组件，但其必需的内容不存在。 content-does-not-exist

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

卡组件 的节点结构

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

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

编辑器中的

AEM项目中同时存在该组件及其必需内容。 both-exist

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

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

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