SPA Los componentes de React editables pueden ser "fijos" o codificados en las vistas de la. SPA SPA AEM SPA Esto permite a los desarrolladores colocar componentes compatibles con el Editor de la en las vistas de componentes y permitir a los usuarios crear el contenido de los componentes en el Editor de la.
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 crear el texto del título y cambiarlo fuera del ciclo de desarrollo.
Para agregar un Fijo a la vista Inicio:
SPA En la vista Página de inicio de la aplicación, reemplace el texto codificado de forma rígida <h2>Current Adventures</h2>
con un componente de título editable personalizado. Para poder utilizar el componente Título, debemos hacer lo siguiente:
@adobe/aem-react-editable-components
para que sea editable.MapTo
por lo que se puede utilizar en componente de contenedor posterior.Para ello, haga lo siguiente:
SPA Abra el proyecto remoto de en ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app
en su IDE
Cree un componente de React en react-app/src/components/editable/core/Title.js
Agregue el siguiente código a Title.js
.
import React from 'react'
import { RoutedLink } from "./RoutedLink";
const TitleLink = (props) => {
return (
<RoutedLink className={props.baseCssClass + (props.nested ? '-' : '__') + 'link'}
isRouted={props.routed}
to={props.linkURL}>
{props.text}
</RoutedLink>
);
};
const TitleV2Contents = (props) => {
if (!props.linkDisabled) {
return <TitleLink {...props} />
}
return <>{props.text}</>
};
export const Title = (props) => {
if (!props.baseCssClass) {
props.baseCssClass = 'cmp-title'
}
const elementType = (!!props.type) ? props.type.toString() : 'h3';
return (<div className={props.baseCssClass}>
{
React.createElement(elementType, {
className: props.baseCssClass + (props.nested ? '-' : '__') + 'text',
},
<TitleV2Contents {...props} />
)
}
</div>)
}
export const titleIsEmpty = (props) => props.text == null || props.text.trim().length === 0
AEM SPA Tenga en cuenta que este componente de React aún no se puede editar con el Editor de. Este componente base se podrá editar en el siguiente paso.
Lea los comentarios del código para obtener más información sobre la implementación.
Cree un componente de React en react-app/src/components/editable/EditableTitle.js
Agregue el siguiente código a EditableTitle.js
.
// Import the withMappable API provided bu the AEM SPA Editor JS SDK
import { EditableComponent, MapTo } from '@adobe/aem-react-editable-components';
import React from 'react'
// Import the AEM the Title component implementation and it's Empty Function
import { Title, titleIsEmpty } from "./core/Title";
import { withConditionalPlaceHolder } from "./core/util/withConditionalPlaceholder";
import { withStandardBaseCssClass } from "./core/util/withStandardBaseCssClass";
// The sling:resourceType of the AEM component used to collected and serialize the data this React component displays
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: titleIsEmpty, // The function to determine if this component has been authored
resourceType: RESOURCE_TYPE // The sling:resourceType this component is mapped to
};
export const WrappedTitle = (props) => {
const Wrapped = withConditionalPlaceHolder(withStandardBaseCssClass(Title, "cmp-title"), titleIsEmpty, "TitleV2")
return <Wrapped {...props} />
}
// EditableComponent makes the component editable by the AEM editor, either rendered statically or in a container
const EditableTitle = (props) => <EditableComponent config={EditConfig} {...props}><WrappedTitle /></EditableComponent>
// MapTo allows the AEM SPA Editor JS SDK to dynamically render components added to SPA Editor Containers
MapTo(RESOURCE_TYPE)(EditableTitle);
export default EditableTitle;
Esta EditableTitle
El componente React ajusta el Title
AEM SPA Reaccione el componente, envolviéndolo y decorándolo para que pueda editarse en el Editor de.
Ahora que el componente React Título editable está registrado en y disponible para usar en la aplicación React, reemplace el texto de título predefinido en la vista Inicio.
Editar react-app/src/components/Home.js
En el Home()
en la parte inferior, importe EditableTitle
y reemplace el título codificado por el nuevo AEMTitle
componente:
...
import EditableTitle from './editable/EditableTitle';
...
function Home() {
return (
<div className="Home">
<EditableTitle
pagePath='/content/wknd-app/us/en/home'
itemPath='root/title'/>
<Adventures />
</div>
);
}
El Home.js
el archivo debe tener un aspecto similar al siguiente:
Inicie sesión en AEM Author
Vaya a Sitios > Aplicación WKND
Tocar Inicio y seleccione Editar desde la barra de acciones superior
Seleccionar 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 del título predeterminado debajo del logotipo de WKND y encima de la lista de aventuras hasta que se muestre el contorno de edición azul
Pulse para mostrar la barra de acciones del componente y, a continuación, pulse el botón llave para editar
Cree el componente Título:
Título: WKND Adventures
Tipo/tamaño: H2
Tocar Listo para guardar
AEM SPA Previsualice los cambios en el editor de
Actualice la aplicación WKND ejecutándose localmente en http://localhost:3000 y ver los cambios de título creados inmediatamente reflejados.
¡Ha agregado un componente fijo editable a la aplicación WKND! Ahora ya sabe cómo:
Los siguientes pasos son AEM añadir un componente contenedor de cuadrícula interactiva de la aplicación de datos SPA SPA a la que permite al autor añadir y editar componentes a la.