Sammansatta komponenter i SPA composite-components-in-spas

Komponenter som består av kompositer är modulära till AEM-komponenter genom att kombinera flera baskomponenter till en enda komponent. Ett vanligt användningsfall för sammansatta komponenter är kortkomponenten som består av en kombination av bild- och textkomponenterna.

När sammansatta komponenter implementeras på rätt sätt i redigeringsramverket för AEM Single Page Application (SPA) kan innehållsförfattarna dra och släppa sådana komponenter på samma sätt som andra komponenter, men ändå ha möjlighet att redigera varje komponent som utgör den sammansatta komponenten separat.

I den här artikeln visas hur du kan lägga till en sammansatt komponent i ett enkelsidigt program för att fungera sömlöst med AEM SPA Editor.

Användningsfall use-case

I den här artikeln används den vanliga kortkomponenten som exempel på hur den används. Kort är ett vanligt gränssnittselement för många digitala upplevelser och består vanligtvis av en bild och tillhörande text eller bildtext. En författare vill kunna dra och släppa hela kortet, men kan redigera kortets bild individuellt och anpassa den tillhörande texten.

Förutsättningar prerequisites

Följande modeller för stöd av användning av sammansatta komponenter kräver följande krav.

Lägga till sammansatta komponenter i en SPA adding-composite-components

Det finns tre olika modeller för implementering av den sammansatta komponenten beroende på din SPA-implementering i AEM.

I följande avsnitt ges exempel på hur du implementerar varje fall med kortkomponenten som exempel.

Komponenten finns inte i ditt AEM-projekt. component-does-not-exist

Börja med att skapa de komponenter som ska utgöra den sammansatta komponenten, det vill säga komponenterna för bilden och dess text.

Textkomponenten liknar följande.

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);

Om du skapar en bildkomponent på ett liknande sätt kan du kombinera den med komponenten AEMText till en ny kortkomponent och använda bild- och textkomponenterna som underordnade.

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>
);

Den sammansatta komponenten som skapas kan nu placeras var som helst i programmet och platshållare för en text och en bildkomponent läggs till i SPA-redigeraren. I exemplet nedan läggs kortkomponenten till i hemkomponenten under rubriken.

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

Då visas en tom platshållare för text och bilder i redigeraren. När du anger värden för dessa med redigeraren lagras de på den angivna sidsökvägen, dvs. /content/wknd-spa/home, på rotnivån med de namn som anges i itemPath.

Komponenten finns i ditt AEM-projekt, men det obligatoriska innehållet gör det inte. content-does-not-exist

I det här fallet har kortkomponenten redan skapats i ditt AEM-projekt med titel- och bildnoder. De underordnade noderna (text och bild) har motsvarande resurstyper.

Sedan kan du lägga till den i SPA-filen och hämta dess innehåll.

Nu kan komponenten imagecard läggas till direkt i behållaren i AEM Editor.

Komponenten och dess obligatoriska innehåll finns båda i ditt AEM-projekt. both-exist

Om innehållet finns i AEM kan det ingå direkt i SPA genom att ange sökvägen till innehållet.

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

Komponenten AEMCard är densamma som definierad ​ i det föregående användningsfallet. Här ingår det innehåll som definieras på ovanstående plats i AEM-projektet i SPA-programmet.