Sammansatta komponenter i SPA composite-components-in-spas

Komponenter som består av sammansatta komponenter är modulära AEM 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 som vilken annan komponent som helst, 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.

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å 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. 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 AEMText till en ny kortkomponent, med 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 kan nu placeras var som helst i programmet och platshållare för en text och en bildkomponent läggs till i SPA. 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, d.v.s. /content/wknd-spa/home på rotnivån med de namn som anges i itemPath.

Komponenten finns i ditt AEM 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 med titel- och bildnoder. De underordnade noderna (text och bild) har motsvarande resurstyper.

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

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

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

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

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

The AEMCard -komponenten är densamma som definierad i det föregående användningsexemplet. Här inkluderas det innehåll som definieras på ovanstående plats i AEM projekt i SPA.