Samengestelde componenten in SPA's 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 binnen het kader van de Redacteur van de Redacteur van de Toepassing van de Enige Pagina van AEM (SPA) worden uitgevoerd, kunnen de inhoudsauteurs dergelijke componenten slepen en laten vallen zoals zij een andere component, maar hebben nog de capaciteit om elke component afzonderlijk uit te geven die omhoog de samengestelde component maken.

Dit artikel toont aan hoe u een samengestelde component aan uw enige paginatoepassing kunt toevoegen om foutloos met de Redacteur van AEM SPA te werken.

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 componenten toevoegen aan een SPA adding-composite-components

Er zijn drie verschillende modellen om uw samengestelde component afhankelijk van uw implementatie van het KUUROORD binnen AEM uit te voeren.

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 dezelfde manier maakt, kunt u deze met de component AEMText combineren tot een nieuwe kaartcomponent en de afbeeldings- en tekstcomponenten als onderliggende elementen gebruiken.

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

Deze resulterende samengestelde component kan nu overal in de app worden geplaatst en de component zal plaatsaanduidingen voor een tekst en een afbeeldingscomponent toevoegen 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 via de editor, worden ze 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 is 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.

De component imagecard kan nu rechtstreeks aan de container worden toegevoegd in de AEM-editor.

De component en de vereiste inhoud zijn beide aanwezig in uw AEM-project. both-exist

Als de inhoud in AEM bestaat, kan het direct in het KUUROORD worden omvat door de weg aan de inhoud te verstrekken.

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

De component AEMCard is het zelfde als bepaald ​ in het vorige gebruiksgeval. Hier is de inhoud die op de bovenstaande locatie in het AEM-project is gedefinieerd, opgenomen in de SPA.