Los componentes React editables se pueden "corregir" o codificar en las vistas de SPA. Esto permite a los desarrolladores colocar componentes compatibles con SPA Editor en las vistas de SPA y permitir a los usuarios crear el contenido de los componentes en AEM SPA Editor.
En este capítulo, reemplazamos el título de la vista Inicio, "Aventuras actuales", que es texto codificado en Home.js
con un componente de Título fijo pero editable. Los componentes fijos garantizan la colocación del título, pero también permiten que el texto del título se cree y cambie fuera del ciclo de desarrollo.
Para añadir un componente Fijo a la vista Inicio:
En la vista Inicio de SPA, sustituya el texto codificado <h2>Current Adventures</h2>
por el componente Título de los componentes principales de React AEM. Antes de poder utilizar el componente Título , debemos:
@adobe/aem-core-components-react-base
withMappable
para que los desarrolladores puedan colocarla en el SPAMapTo
para que se pueda utilizar en el componente contenedor más adelante.Para ello:
Abra el proyecto SPA remoto en ~/Code/wknd-app/aem-guides-wknd-graphql/react-app
en su IDE
Crear un componente React en react-app/src/components/aem/AEMTitle.js
Agregue el siguiente código a 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;
Lea los comentarios del código para conocer los detalles de implementación.
El archivo AEMTitle.js
debería tener el siguiente aspecto:
Ahora que el componente Título del componente principal de React de AEM está registrado en y disponible para su uso en la aplicación React, reemplace el texto de título codificado en la vista Inicio.
Editar react-app/src/App.js
en Home()
en la parte inferior, sustituya el título codificado por el nuevo componente AEMTitle
:
<h2>Current Adventures</h2>
con
<AEMTitle
pagePath='/content/wknd-app/us/en/home'
itemPath='root/title'/>
Actualice Apps.js
con el siguiente código:
...
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>
);
}
El archivo Apps.js
debería tener el siguiente aspecto:
Iniciar sesión en AEM Author
Vaya a Sites > WKND App
Pulse Inicio y seleccione Editar en la barra de acciones superior
Seleccione Editar en el selector de modo de edición en la parte superior derecha del Editor de páginas
Pase el ratón sobre el texto predeterminado del título debajo del logotipo de WKND y encima de la lista de aventuras, hasta que aparezca el contorno azul de edición
Pulse para exponer la barra de acciones del componente y, a continuación, pulse la llave inglesa para editar
Cree el componente Título :
Título: Aventuras de WKND
Tipo/tamaño: H2
Toque Listo para guardar
Previsualizar los cambios en AEM Editor SPA
Actualice la aplicación WKND que se ejecuta localmente en http://localhost:3000 y vea los cambios de título creados inmediatamente reflejados.
¡Ha agregado un componente fijo y editable a la aplicación WKND! Ahora sabe cómo:
Los siguientes pasos son agregar un componente de contenedor AEM ResponsiveGrid a la SPA que permite al autor agregar y editar componentes a la SPA!