Samengestelde onderdelen in SPA composite-components-in-spas

Samengestelde componenten gebruiken de modulaire aard van AEM componenten door meerdere basiscomponenten in één component te combineren. Een veelvoorkomend geval voor gebruik van samengestelde componenten is de kaartcomponent, die bestaat uit een combinatie van de afbeelding en tekstcomponenten.

Wanneer samengestelde componenten correct worden geïmplementeerd in het kader van de Editor (SPA) van AEM toepassing voor één pagina, kunnen de auteurs van de inhoud deze componenten slepen en neerzetten, net als elke andere component, maar kunnen ze toch elke component die de samengestelde component vormt afzonderlijk bewerken.

Dit artikel laat zien hoe u een samengestelde component kunt toevoegen aan uw toepassing voor één pagina, zodat u naadloos kunt werken met de AEM SPA Editor.

Hoofdletters gebruiken use-case

Dit artikel gebruikt de typische kaartcomponent als zijn geval van het voorbeeldgebruik. Kaarten vormen een algemeen interface-element voor veel digitale ervaringen en bestaan doorgaans uit een afbeelding en de bijbehorende tekst of bijschrift. Een auteur wil de hele kaart kunnen slepen en neerzetten, maar de afbeelding van de kaart afzonderlijk kunnen bewerken en de bijbehorende tekst aanpassen.

Vereisten prerequisites

De volgende modellen voor het steunen van de composietgebruiksgevallen vereisen de volgende eerste vereisten.

Samengestelde onderdelen toevoegen aan een SPA adding-composite-components

Er zijn drie verschillende modellen voor het uitvoeren van uw samengestelde component afhankelijk van uw SPA implementatie binnen AEM.

De volgende secties geven voorbeelden van het uitvoeren van elk geval gebruikend de kaartcomponent als voorbeeld.

De component bestaat niet in uw AEM project. component-does-not-exist

Begin door de componenten te creëren die de samengestelde component, namelijk componenten voor het beeld en zijn tekst zullen vormen.

De tekstcomponent is vergelijkbaar met het volgende.

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

Als u een afbeeldingscomponent op een vergelijkbare manier maakt, kunt u deze combineren met de opdracht AEMText in een nieuwe kaartcomponent, die de beeld en tekstcomponenten gebruiken als kinderen.

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

Dit resulterende samengestelde onderdeel kan nu overal in de app worden geplaatst en de toepassing voegt plaatsaanduidingen voor een tekst en een afbeeldingscomponent toe in de SPA Editor. In het onderstaande voorbeeld wordt de kaartcomponent toegevoegd aan de thuiscomponent onder de titel.

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

Hiermee wordt een lege plaatsaanduiding voor een tekst en een afbeelding in de editor weergegeven. Wanneer u waarden voor deze waarden invoert in de editor, worden deze opgeslagen op het opgegeven paginapad, dat wil zeggen: /content/wknd-spa/home op het hoofdniveau met de namen die zijn opgegeven in itemPath.

De component bestaat in uw AEM project maar de vereiste inhoud niet. content-does-not-exist

In dit geval wordt de kaartcomponent al gemaakt in uw AEM project met titel- en afbeeldingsknooppunten. De kindknopen (tekst en beeld) hebben de overeenkomstige middeltypes.

U kunt het dan toevoegen aan uw SPA en zijn inhoud terugwinnen.

Nu de imagecard kan direct aan de container in de AEM redacteur worden toegevoegd.

De component en zijn vereiste inhoud allebei bestaan in uw AEM project. both-exist

Als de inhoud in AEM bestaat, kan deze rechtstreeks in de SPA worden opgenomen door het pad naar de inhoud op te geven.

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

De AEMCard component is hetzelfde als gedefinieerd in het geval van eerder gebruik. Hier is de inhoud die op de bovenstaande locatie in het AEM project is gedefinieerd, opgenomen in de SPA.