复合组件通过将多个基本组件组合到一个组件中来利用AEM组件的模块化特性。 常见的复合组件用例是卡组件,由图像和文本组件组合而成。
在AEM单页应用程序(SPA)编辑器框架中正确实施复合组件后,内容作者可以像拖放任何其他组件一样拖放此类组件,但仍然能够单独编辑构成复合组件的每个组件。
本文演示了如何将复合组件添加到单页应用程序,以便与AEM SPA编辑器无缝协作。
本文将以典型卡组件作为示例用例。 信息卡是许多数字体验的公用UI元素,通常由图像和相关文本或题注组成。 作者希望能够拖放整个卡片,但能够单独编辑卡片的图像并自定义关联的文本。
以下支持复合组件用例的模型需要以下先决条件。
实施复合组件有三种不同的模型,具体取决于AEM中的SPA实施。
以下各节提供了使用卡组件作为示例来实施每个用例的示例。
首先,创建将构成复合组件的组件,即图像及其文本的组件。
在AEM项目中创建文本组件。
添加相应的 resourceType
从组件的项目 editConfig
节点。
resourceType: 'wknd-spa/components/text'
使用 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项目中创建了。 子节点(文本和图像)具有相应的资源类型。
然后,您可以将其添加到SPA并检索其内容。
在SPA中为此创建一个对应的组件。 确保子组件映射到SPA项目中的相应AEM资源类型。 在此示例中,我们使用相同的 AEMText
和 AEMImage
详细组件 在上一个案例中。
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);
因为没有内容 imagecard
组件中,将卡添加到页面中。 在SPA中包含来自AEM的现有容器。
<ResponsiveGrid
pagePath='/content/wknd-spa/home'
itemPath='root/responsivegrid' />
添加已创建的 wknd-spa/components/imagecard
组件到容器组件允许的组件 在页面模板中。
现在, imagecard
组件可直接添加到AEM编辑器中的容器。
如果内容存在于AEM中,则可以通过提供指向内容的路径直接将其包含在SPA中。
<AEMCard
pagePath='/content/wknd-spa/home'
itemPath='root/responsivegrid/imagecard' />
此 AEMCard
组件与定义的组件相同 在上一个用例中。 此处,在AEM项目的上述位置中定义的内容包含在SPA中。