可编辑的固定组件

可编辑的React组件可以是“固定”的,也可以硬编码到SPA视图中。 这允许开发人员将与SPA Editor兼容的组件放入SPA视图中,并允许用户在AEM SPA Editor中创作组件内容。

固定组件

在本章中,我们将主页视图的标题“当前历险”替换为固定但可编辑的标题组件,该组件在Home.js中以硬编码的文本。 固定的组件可确保标题的放置,但也允许创作标题的文本,并在开发周期之外进行更改。

更新WKND应用程序

要向“主页”视图添加“固定”组件,请执行以下操作:

  • 导入AEM React核心组件标题组件,并将其注册到项目标题的资源类型
  • 将可编辑的标题组件放在SPA主页视图上

在AEM React核心组件的标题组件中导入

在SPA主页视图中,将硬编码的文本<h2>Current Adventures</h2>替换为AEM React核心组件的标题组件。 在使用标题组件之前,我们必须:

  1. @adobe/aem-core-components-react-base导入标题组件
  2. 使用withMappable进行注册,以便开发人员可以将其放入SPA中
  3. 此外,请在MapTo中注册,以便在以后的容器组件中使用

要执行此操作:

  1. 在IDE的~/Code/wknd-app/aem-guides-wknd-graphql/react-app处打开远程SPA项目

  2. react-app/src/components/aem/AEMTitle.js处创建React组件

  3. 将以下代码添加到AEMTitle.js

    // Import the withMappable API provided by the AEM SPA Editor JS SDK
    import { withMappable, MapTo } from '@adobe/aem-react-editable-components';
    
    // Import the AEM React Core Components' Title component implementation and it's Empty Function
    import { TitleV2, TitleV2IsEmptyFn } from "@adobe/aem-core-components-react-base";
    
    // The sling:resourceType for which this Core Component is registered with in AEM
    const RESOURCE_TYPE = "wknd-app/components/title";
    
    // Create an EditConfig to allow the AEM SPA Editor to properly render the component in the Editor's context
    const EditConfig = {
        emptyLabel: "Title",  // The component placeholder in AEM SPA Editor
        isEmpty: TitleV2IsEmptyFn, // The function to determine if this component has been authored
        resourceType: RESOURCE_TYPE // The sling:resourceType this component is mapped to
    };
    
    // MapTo allows the AEM SPA Editor JS SDK to dynamically render components added to SPA Editor Containers
    MapTo(RESOURCE_TYPE)(TitleV2, EditConfig);
    
    // withMappable allows the component to be hardcoded into the SPA; <AEMTitle .../>
    const AEMTitle = withMappable(TitleV2, EditConfig);
    
    export default AEMTitle;
    

阅读代码中有关实施详细信息的注释。

AEMTitle.js文件应该如下所示:

AEMTitle.js

使用React AEMTitle组件

现在,AEM React核心组件的标题组件已在中注册,并可在React应用程序中使用,请替换主页视图上的硬编码标题文本。

  1. 编辑 react-app/src/App.js

  2. 在底部的Home()中,将硬编码的标题替换为新的AEMTitle组件:

    <h2>Current Adventures</h2>
    

    替换为

    <AEMTitle
        pagePath='/content/wknd-app/us/en/home'
        itemPath='root/title'/>
    

    使用以下代码更新Apps.js:

    ...
    import { AEMTitle } from './components/aem/AEMTitle';
    ...
    function Home() {
        return (
            <div className="Home">
    
                <AEMTitle
                    pagePath='/content/wknd-app/us/en/home'
                    itemPath='root/title'/>
    
                <Adventures />
            </div>
        );
    }
    

Apps.js文件应该如下所示:

App.js

在AEM中创作标题组件

  1. 登录到AEM作者

  2. 导航到​Sites > WKND App

  3. 点按​Home,然后从顶部操作栏中选择​编辑

  4. 从页面编辑器右上角的编辑模式选择器中选择​编辑

  5. 将鼠标悬停在WKND徽标下方和冒险列表上方的默认标题文本上,直到显示蓝色的编辑大纲

  6. 点按以显示组件的操作栏,然后点按​扳手​以进行编辑

    标题组件操作栏

  7. 创作标题组件:

    • 标题:WKND冒险

    • 类型/大小:H2

      标题组件对话框

  8. 点按​完成​以保存

  9. 在AEM SPA编辑器中预览更改

  10. 刷新在http://localhost:3000上本地运行的WKND应用程序,并立即查看创作的标题更改。

    SPA中的标题组件

恭喜!

您已向WKND应用程序添加了一个固定的可编辑组件! 您现在知道如何:

  • 在SPA中导入AEM React核心组件并将其重复使用
  • 向SPA中添加一个已修复但可编辑的组件
  • 在AEM中创作固定组件
  • 在远程SPA中查看创作的内容

下面的步骤

接下来的步骤是将AEM ResponsiveGrid容器组件添加到SPA中,以便作者向SPA中添加和可编辑的组件!

在此页面上