如何将AEM React可编辑组件v1的Page组件用法迁移至v2？

正确的v2版本写法 #

import { Page, useModel, usePage } from '@adobe/aem-react-editable-components';
import React from 'react';

const App = () => {
  // 获取页面模型数据，替代v1的withModel高阶组件
  const model = useModel();
  // 获取子组件与子页面集合，替代v1的this.childComponents/this.childPages
  const { childComponents, childPages } = usePage();

  return (
    <Page model={model}>
      <div>
        <TestComponent />
        {childComponents}
        {childPages}
      </div>
    </Page>
  );
};

export default App;

关键变化说明 #

• 废弃类继承模式：v2彻底移除了通过继承Page类的用法，强制使用组合式API，必须配合函数组件实现。
• withModel替代方案：原withModel高阶组件被useModel hook取代，直接在函数组件内获取页面模型数据。
• Page组件的角色转变：v2的Page是上下文提供者，必须将页面内容包裹在<Page>标签内部，并传递model属性，确保内部hooks能正确读取页面上下文。
• 子内容的获取方式：原实例属性this.childComponents和this.childPages不再可用，需通过usePage hook从Page上下文中获取对应内容。

额外注意事项 #

• 确保项目依赖已升级到@adobe/aem-react-editable-components v2.x版本，检查package.json确认版本号。
• 若项目中还有其他基于v1继承模式的可编辑组件（如Component类），需同步改为组合式写法+对应hooks（如useComponent）。

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