Componentes compuestos en SPA composite-components-in-spas

AEM Los componentes compuestos utilizan la naturaleza modular de los componentes de base mediante la combinación de varios componentes base en un único componente. Un caso de uso de componente compuesto común es el componente de tarjeta, formado por una combinación de los componentes de imagen y texto.

AEM SPA Cuando los componentes compuestos se implementan correctamente dentro del marco de trabajo del Editor de aplicaciones de una sola página () de, los autores de contenido pueden arrastrar y soltar estos componentes como lo harían con cualquier otro componente, pero siguen teniendo la capacidad de editar individualmente cada componente que compone el componente compuesto.

AEM SPA Este artículo muestra cómo puede agregar un componente compuesto a la aplicación de una sola página para trabajar sin problemas con el Editor de.

Caso práctico use-case

Este artículo utiliza el componente de tarjeta típico como ejemplo de uso. Las tarjetas son un elemento de la interfaz de usuario común para muchas experiencias digitales y suelen estar formadas por una imagen y un texto o rótulo asociado. Un autor desea poder arrastrar y soltar toda la tarjeta, pero puede editar individualmente la imagen de la tarjeta y personalizar el texto asociado.

Requisitos previos prerequisites

Los siguientes modelos para admitir los casos de uso de componentes compuestos requieren los siguientes requisitos previos.

SPA Adición de componentes compuestos a un grupo de componentes adding-composite-components

SPA AEM Existen tres modelos diferentes para implementar el componente compuesto en función de la implementación de la dentro de la aplicación de la combinación de componentes

En las siguientes secciones se proporcionan ejemplos de implementación de cada caso utilizando el componente de tarjeta como ejemplo.

AEM El componente no existe en el proyecto de. component-does-not-exist

Comience creando los componentes que compondrán el componente compuesto, es decir, los componentes para la imagen y su texto.

  1. AEM Cree el componente de texto en el proyecto de.

  2. Agregue el(la) resourceType correspondiente del proyecto en el nodo editConfig del componente.

    code language-text
     resourceType: 'wknd-spa/components/text'
    
  3. Use el asistente de withMappable para habilitar la edición del componente.

    code language-text
    export const AEMText = withMappable(Text, TextEditConfig);
    

El componente de texto será similar al siguiente.

import React from 'react';
import { withMappable } from '@adobe/aem-react-editable-components';

export const TextEditConfig = {
  emptyLabel: 'Text',
  isEmpty: function(props) {
    return !props || !props.text || props.text.trim().length < 1;
  },
  resourceType: 'wknd-spa/components/text'
};

export const Text = ({ cqPath, richText, text }) => {
  const richTextContent = () => (
    <div className="aem_text"
      id={cqPath.substr(cqPath.lastIndexOf('/') + 1)}
      data-rte-editelement
      dangerouslySetInnerHTML={{__html: text}} />
  );
  return richText ? richTextContent() : (
     <div className="aem_text">{text}</div>
  );
};

export const AEMText = withMappable(Text, TextEditConfig);

Si crea un componente de imagen de forma similar, puede combinarlo con el componente AEMText en un nuevo componente de tarjeta, utilizando los componentes de imagen y texto como elementos secundarios.

import React from 'react';
import { AEMText } from './AEMText';
import { AEMImage } from './AEMImage';

export const AEMCard = ({ pagePath, itemPath}) => (
  <div>
    <AEMText
       pagePath={pagePath}
       itemPath={`text`} />
    <AEMImage
       pagePath={pagePath}
       itemPath={`image`} />
   </div>
);

SPA Este componente compuesto resultante ahora se puede colocar en cualquier lugar de la aplicación y el agregará marcadores de posición para un componente de texto y de imagen en el Editor de. En el siguiente ejemplo, el componente de tarjeta se agrega al componente principal debajo del título.

function Home() {
  return (
    <div className="Home">
      <h2>Current Adventures</h2>
      <AEMCard
        pagePath='/content/wknd-spa/home' />
    </div>
  );
}

Esto mostrará un marcador de posición vacío para un texto y una imagen en el editor. Al introducir valores para estos elementos mediante el editor, se almacenan en la ruta de página especificada, es decir, /content/wknd-spa/home en el nivel raíz con los nombres especificados en itemPath.

Componente de tarjeta compuesta en el editor

AEM El componente existe en el proyecto de, pero el contenido requerido no. content-does-not-exist

AEM En este caso, el componente de tarjeta ya se ha creado en el proyecto de que contiene los nodos de título e imagen. Los nodos secundarios (texto e imagen) tienen los tipos de recursos correspondientes.

Estructura de nodos del componente de tarjeta

SPA A continuación, puede agregarlo a la y recuperar su contenido.

  1. SPA Cree un componente correspondiente en la lista de componentes para este elemento AEM SPA Asegúrese de que los componentes secundarios estén asignados a sus tipos de recursos de la correspondientes dentro del proyecto de la aplicación. En este ejemplo utilizamos los mismos componentes AEMText y AEMImage que se detallaron en el caso anterior.

    code language-javascript
    import React from 'react';
    import { Container, withMappable, MapTo } from '@adobe/aem-react-editable-components';
    import { Text, TextEditConfig } from './AEMText';
    import Image, { ImageEditConfig } from './AEMImage';
    
    export const AEMCard = withMappable(Container, {
      resourceType: 'wknd-spa/components/imagecard'
    });
    
    MapTo('wknd-spa/components/text')(Text, TextEditConfig);
    MapTo('wknd-spa/components/image')(Image, ImageEditConfig);
    
  2. Dado que no hay contenido para el componente imagecard, agregue la tarjeta a la página. AEM SPA Incluya el contenedor existente de la lista de en el cuadro de diálogo de la.

    • AEM SPA AEM Si ya hay un contenedor en el proyecto de, podemos incluirlo en la lista de distribución en su lugar y agregar el componente al contenedor desde la lista de distribución en su lugar, en la lista de distribución en la que se va a incluir el componente en la lista de distribución en el proyecto de.
    • SPA Asegúrese de que el componente de tarjeta esté asignado al tipo de recurso correspondiente en la tarjeta de.
    code language-javascript
    <ResponsiveGrid
     pagePath='/content/wknd-spa/home'
     itemPath='root/responsivegrid' />
    
  3. Agregue el componente wknd-spa/components/imagecard creado a los componentes permitidos para el componente contenedor en la plantilla de página.

AEM Ahora el componente imagecard se puede agregar directamente al contenedor en el editor de.

Tarjeta compuesta en el editor

AEM Tanto el componente como el contenido requerido existen en el proyecto de. both-exist

AEM SPA Si el contenido existe en la, se puede incluir directamente en la misma proporcionando la ruta de acceso al contenido.

<AEMCard
    pagePath='/content/wknd-spa/home'
    itemPath='root/responsivegrid/imagecard' />

Ruta compuesta en la estructura del nodo

El componente AEMCard es el mismo que se definió en el caso de uso anterior.AEM SPAAquí se incluye en la lista el contenido definido en la ubicación anterior del proyecto de la.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2