AEM SPA React框架中Experience Fragment组件不显示求助

我在AEM SPA React框架中创建Experience Fragment组件，参考相关社区内容但缺少JCR节点组件配置细节，自行配置了src/main/content/jcr_root/apps/project/components/functional/spasamples/experiencefragment路径下的文件，但将组件拖拽到测试页面后无法正常显示，以下是我的配置代码：

.content.xml #

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    cq:styleElements="[div,section,article,main,aside,header,footer]"
    jcr:primaryType="cq:Component"
    jcr:title="Experience Fragment"
    componentGroup="POC SPA React - Content"/>

_cq_editConfig.xml #

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    cq:actions="[EDIT,DELETE,INSERT,COPYMOVE]"
    jcr:primaryType="cq:EditConfig">
    <cq:dropTargets jcr:primaryType="nt:unstructured">
        <experiencefragment
            jcr:primaryType="cq:DropTargetConfig"
            accept="[text/html]"
            groups="[content]"
            propertyName="./fragmentVariationPath"/>
    </cq:dropTargets>
    <cq:listeners
        jcr:primaryType="nt:unstructured"
        afterinsert="REFRESH_PAGE"/>
    <cq:actionConfigs jcr:primaryType="nt:unstructured">
        <editInNewTab
            jcr:primaryType="nt:unstructured"
            handler="Granite.author.experienceFragments &amp;&amp; Granite.author.experienceFragments.actions.editInNewTab"
            icon="edit"
            text="Edit"/>
    </cq:actionConfigs>
</jcr:root>

content.html #

<sly data-sly-use.body="body.js" data-sly-resource="${body.resourcePath @ selectors=[]}"/>

customfooterlibs.html #

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
    <sly data-sly-call="${clientlib.js @ categories='global_pdc.base'}"/>
</sly>

customheaderlibs.html #

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.js @ categories='global_pdc.dependencies'}"/>
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.css @ categories='global_pdc.base'}"/>

<!--/* Include Context Hub */-->
<sly data-sly-resource="${'contexthub' @ resourceType='granite/contexthub/components/contexthub'}"/>

解决建议 #

• 补全body.js逻辑：content.html依赖body.js返回正确的resourcePath，需确保该文件能读取组件的fragmentVariationPath属性并返回经验片段的实际资源路径，示例代码：

use(function () {
    const fragmentPath = properties.get('fragmentVariationPath', '');
    return fragmentPath ? { resourcePath: fragmentPath } : {};
});

• 修正Drop Target的accept类型：_cq_editConfig.xml中的accept属性应设置为经验片段对应的JCR类型，比如[cq:Page]/experience-fragment，确保只能拖拽合法的经验片段资源，避免路径错误。

• 检查客户端库依赖：确认global_pdc.base等客户端库已包含AEM Experience Fragment的核心依赖（如cq.experience-fragments），若未包含，需在客户端库定义中添加该分类。

• 配置SPA组件映射：在React代码中，需将该组件的resourceType映射到对应的React组件，确保SPA编辑器能正确渲染，示例：

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

const ExperienceFragment = ({ cqPath, ...props }) => {
    return <div data-cq-path={cqPath} className="experience-fragment">{/* 可通过AEM API获取并渲染片段内容 */}</div>;
};

MapTo('project/components/functional/spasamples/experiencefragment')(ExperienceFragment);

• 验证页面模板兼容性：确保测试页面的模板允许添加该组件，且页面的SPA容器（如EditableComponent）能正确加载并解析经验片段内容。

• 查看AEM错误日志：检查crx-quickstart/logs/error.log，排查组件渲染时的资源路径错误、JS逻辑异常等问题。

内容的提问来源于stack exchange，提问作者sefirosu