AEM与React JS集成方法及组件对接步骤咨询

核心架构思路 #

React负责前端UI渲染和用户交互，AEM作为数据存储与服务端，通过Sling Model导出JSON或Content Fragments API提供结构化数据，React通过HTTP请求获取数据后渲染组件。

一、AEM端配置（数据接收与API暴露） #

• 定义数据模型：创建Content Fragment模型（如Article），配置字段（标题、内容、发布日期等），并生成Content Fragment实例存储业务数据。
• 开发Sling Model导出JSON：编写Java类适配JCR资源，通过Sling Model Exporter直接暴露JSON接口：

  @Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
  @Exporter(name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, extensions = "json")
  public class ArticleModel {
      @Inject @Named("jcr:title")
      private String title;
      @Inject @Named("content")
      private String content;
  
      public String getTitle() { return title; }
      public String getContent() { return content; }
  }
  

  部署后，访问/content/your-site/en/articles/article-1.model.json即可获取结构化JSON数据。
• 配置CORS：在AEM的OSGi控制台（/system/console/configMgr）中，更新org.apache.sling.cors.impl.CORSConfiguration，添加React应用的域名到allowedOrigins列表，解决跨域请求问题。

二、React项目开发 #

• 初始化项目：用create-react-app或Vite创建React项目，封装API请求工具：

  const AEM_API_BASE = 'http://your-aem-instance.com/content/your-site/en/articles';
  
  export const fetchArticle = async (articleSlug) => {
    const res = await fetch(`${AEM_API_BASE}/${articleSlug}.model.json`);
    if (!res.ok) throw new Error('AEM数据请求失败');
    return res.json();
  };
  

• 开发React业务组件：基于AEM返回的数据渲染UI：

  import { useState, useEffect } from 'react';
  import { fetchArticle } from './api';
  
  export default function Article({ slug }) {
    const [article, setArticle] = useState(null);
    const [isLoading, setIsLoading] = useState(true);
  
    useEffect(() => {
      const loadData = async () => {
        try {
          const data = await fetchArticle(slug);
          setArticle(data);
        } catch (err) {
          console.error('加载文章失败:', err);
        } finally {
          setIsLoading(false);
        }
      };
      loadData();
    }, [slug]);
  
    if (isLoading) return <div>加载中...</div>;
    if (!article) return <div>文章不存在</div>;
  
    return (
      <article>
        <h1>{article.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: article.content }} />
      </article>
    );
  }
  

三、React组件与AEM组件集成步骤 #

方式1：AEM嵌入React组件（客户端渲染） #

适合需要在AEM页面中局部嵌入React功能的场景：

1. 在AEM中创建自定义组件：
   新建react-article组件，编写HTL脚本输出React容器和加载逻辑：

   <div id="react-article-${component.id}"></div>
   <script>
     const script = document.createElement('script');
     // 指向React打包后的生产脚本（可上传至AEM DAM）
     script.src = '/content/dam/your-site/react/build/static/js/main.xxxx.js';
     script.onload = () => {
       // 调用React暴露的全局初始化方法
       window.renderReactArticle('react-article-${component.id}', '${properties.articleSlug}');
     };
     document.body.appendChild(script);
   </script>
   

   组件属性中添加articleSlug字段，用于配置要加载的AEM文章路径。
2. React项目暴露全局方法：
   修改src/index.js，添加全局初始化函数：

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import Article from './Article';
   
   window.renderReactArticle = (rootId, slug) => {
     const root = ReactDOM.createRoot(document.getElementById(rootId));
     root.render(<Article slug={slug} />);
   };
   

   执行npm run build打包，将产物上传至AEM DAM。

方式2：React独立部署，AEM作为Headless CMS #

适合纯前端分离场景：

1. React独立部署：将React项目部署至Netlify/Vercel等平台，路由与AEM内容路径映射（如React的/articles/:slug对应AEM的/content/your-site/en/articles/:slug.model.json）。
2. AEM配置内容发布：确保Content Fragments和Sling Model接口对外可访问，配置CDN加速静态数据请求。

常见问题排查 #

• 跨域请求失败：检查AEM的CORS配置，确认allowedOrigins包含React域名，allowedMethods包含GET。
• API返回404：验证AEM资源路径正确，Sling Model已正确部署，访问.model.json路径确认数据是否存在。
• React组件不渲染：检查浏览器控制台报错，确认AEM传入的articleSlug属性正确，API返回数据结构与组件预期一致。
• AEM无法加载React脚本：确保DAM中的脚本权限设置为允许匿名访问，脚本路径无拼写错误。

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